一个简单的收缩菜单效果

收缩菜单是一种常见的网页UI设计效果，可以在有限的空间内呈现更多的内容，增强网站的可读性和交互性。下面是一个简单的收缩菜单效果的完整攻略。

步骤一：准备HTML和CSS代码

首先，我们需要准备一个基本的HTML结构，包括一个固定宽度的顶部导航栏和一个带有列表内容的主体区域。代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>收缩菜单效果</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">导航1</a></li>
                <li><a href="#">导航2</a></li>
                <li><a href="#">导航3</a></li>
                <li><a href="#">导航4</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>收缩菜单效果</h1>
        <ul>
            <li><a href="#">内容1</a></li>
            <li><a href="#">内容2</a></li>
            <li><a href="#">内容3</a></li>
            <li><a href="#">内容4</a></li>
            <li><a href="#">内容5</a></li>
            <li><a href="#">内容6</a></li>
            <li><a href="#">内容7</a></li>
            <li><a href="#">内容8</a></li>
            <li><a href="#">内容9</a></li>
            <li><a href="#">内容10</a></li>
        </ul>
    </main>
</body>
</html>

然后，我们需要为导航栏和主体区域添加CSS样式，包括宽度、高度、背景颜色等等。代码如下：

body {
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    height: 50px;
    background-color: #333;
    position: fixed;
    top: 0;
    left: 0;
}

nav {
    width: 960px;
    height: 50px;
    margin: 0 auto;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    float: left;
}

nav li a {
    display: block;
    width: 100px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    text-align: center;
    text-decoration: none;
}

main {
    margin-top: 50px;
    width: 960px;
    background-color: #f2f2f2;
    margin: 0 auto;
    padding: 20px;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    margin: 10px 0;
}

li a {
    display: block;
    width: 100px;
    height: 20px;
    line-height: 20px;
    color: #333;
    text-align: center;
    background-color: #fff;
    text-decoration: none;
    border: 1px solid #333;
}

li a:hover {
    background-color: #333;
    color: #fff;
}

步骤二：添加jQuery代码

接下来，我们需要添加jQuery代码来实现收缩菜单效果。首先，在HTML文件头部添加以下代码，引入jQuery库：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

然后，在HTML文件尾部添加以下代码，编写jQuery函数：

<script>
    $(document).ready(function() {
        $('nav ul').hide();
        $('header').mouseover(function() {
            $('nav ul').slideDown(500);
        });
        $('nav').mouseleave(function() {
            $('nav ul').slideUp(200);
        });
    });
</script>

步骤三：测试效果

最后，我们启动浏览器，测试效果。当鼠标放置在导航栏上方时，下拉菜单会展开；当鼠标离开导航栏时，下拉菜单会收起。至此，一个简单的收缩菜单效果完成。

示例说明

示例一

将导航栏上方的图标替换成一个hamburger图标，点击后展开下拉菜单。

<header>
    <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <nav>
        <ul>
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
            <li><a href="#">导航4</a></li>
        </ul>
    </nav>
</header>

.hamburger {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 35px;
    height: 5px;
    margin-bottom: 5px;
    background-color: #000;
}

@media screen and (max-width: 960px) {
    nav ul {
        display: none;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background-color: #f2f2f2;
        padding: 0;
    }

    nav li {
        display: block;
        width: 100%;
        float: none;
        border-bottom: 1px solid #333;
        margin: 0;
    }

    .hamburger {
        display: block;
    }
}

$(document).ready(function() {
    $('nav ul').hide();
    $('.hamburger').click(function() {
        $('nav ul').slideToggle(200);
    });
});

示例二

为下拉菜单增加过渡效果，并在菜单项下方添加阴影效果。

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
    z-index: 9999;
}

nav li {
    margin: 0;
    border-bottom: 1px solid #f2f2f2;
}

nav li:last-child {
    border-bottom: none;
}

nav li a {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    color: #333;
    text-decoration: none;
}

nav li a:hover {
    background-color: #f2f2f2;
}

$(document).ready(function() {
    $('nav ul').hide();
    $('header').mouseover(function() {
        $('nav ul').slideDown(200);
    });
    $('nav').mouseleave(function() {
        $('nav ul').slideUp(200);
    });
});

以上就是一个简单的收缩菜单效果的完整攻略，其中包含两个示例说明。您可以根据自己的需要，灵活调整样式和效果，为网站增加更多的交互性和美观性。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：一个简单的收缩菜单效果 - Python技术站

一个简单的收缩菜单效果

步骤一：准备HTML和CSS代码

步骤二：添加jQuery代码

步骤三：测试效果

示例说明

示例一

示例二

相关文章