李涛自留地
回到顶部
首页 > jQuery学习 > 四行jQuery代码实现导航栏下拉菜单功能 jQuery实现导航栏下拉菜单的代码

四行jQuery代码实现导航栏下拉菜单功能 jQuery实现导航栏下拉菜单的代码

文章目录

昨天写了一篇《使用纯Css实现导航栏下拉菜单功能 网页的导航下拉菜单怎么用Css实现？》一文，是使用纯Css实现的网站导航栏下拉菜单的效果，只是在栏目中只有一个栏目下有子栏目的实例，如果导航栏中有多个栏目都有子栏目的时候，再使用纯Css来实现就需要写更多的Css代码来实现了，而且如果使用Css来实现导航栏下拉菜单功能，还是没有JS和jQuery的交互效果好，那么我们本文将记载如何使用四行jQuery代码实现导航栏下拉菜单功能。

jQuery代码实现导航栏下拉菜单的制作思路

首先，我们需要像《使用纯Css实现导航栏下拉菜单功能 网页的导航下拉菜单怎么用Css实现？》一文中一样将大栏目下的子栏目（第一层ul下li标签里嵌套的ul标签）在Css中将其display属性设置为none，不让下拉菜单中的子栏目显示。当我们需要显示的时候，使用jQuery的鼠标经过的时候mouseover() 方法、children()、和show()方法，让鼠标经过的时候显示；当我们鼠标离开的时候，我们使用jQuery的鼠标离开时候的mouseout()方法、children()、和hide()方法，再进行隐藏。

下面是jQuery实现导航栏下拉菜单的Html（jQuery内嵌在里面）、Css代码：

jQuery代码实现导航栏下拉菜单Html代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <title>jQuery制作下拉菜单</title>
</head>
<body>
    <header class="header">
        <nav class="container">
            <ul class="nav">
                <li><a href="#">首页</a></li>
                <li>
                    <a href="#">人物</a>
                    <ul>
                        <li><a href="#">小孩壁纸</a></li>
                        <li><a href="#">纹身壁纸</a></li>
                        <li><a href="#">帅哥壁纸</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">壁纸</a>
                    <ul>
                        <li><a href="#">风景壁纸</a></li>
                        <li><a href="#">建筑壁纸</a></li>
                        <li><a href="#">动物壁纸</a></li>
                        <li><a href="#">人物壁纸</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">漫画</a>
                    <ul>
                        <li><a href="#">日本漫画</a></li>
                        <li><a href="#">中国漫画</a></li>
                        <li><a href="#">韩国漫画</a></li>
                        <li><a href="#">欧美漫画</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    <footer>
    </footer>
    <script>
        $(function () {
            //鼠标经过的时候显示.nav选择器下的li下的ul
            $(".nav>li").mouseover(function () {
                $(this).children("ul").show();
            });
           //鼠标离开的时候隐藏.nav选择器下的li下的ul
            $(".nav>li").mouseout(function () {
                $(this).children("ul").hide();
            })
        })
    </script>
</body>
</html>

本实例中使用了百度jQuery的CDN库，在代码块中

和之间的为jQuery代码。

jQuery代码实现导航栏下拉菜单Css代码:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #666;
}

a {
    text-decoration: none;
    color: #333;
}

ul li {
    list-style: none;
}

.container {
    width: 1180px;
    margin: 0 auto;
}

.header {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 500;
    background-color: #fff;
}

.header nav a {
    color: #fff;
}

.header nav a:hover {
    color: rgba(255, 0, 0, 0.5);
    background-color: #fff;
}

.header .container .nav {
    background-color: rgba(255, 0, 0, 0.6);
}

.header>.container>.nav>li {
    display: inline-block;
    position: relative;
    width: 100px;
    text-align: center;
}

.header>.container>.nav>li>a {
    padding: 15px 33px;
}

.header>.container>.nav>li>ul {
    display: none;
    position: absolute;
    width: 100%;
    text-align: center;
    background-color: #000;
}

.header>.container>.nav>li>ul li a {
    padding: 13px 17px;
}

.header>.container>.nav>li>ul li a:hover {
    border: 1px solid #333;
}

jQuery代码实现导航栏下拉菜单效果图：

四行jQuery代码实现导航栏下拉菜单功能 jQuery实现导航栏下拉菜单的代码

使用jQuery实现导航栏下拉菜单在交互效果上确实要比纯Css实现起来更加的简单，整个核心的jQuery代码也就写了4行，以上本文从jQuery代码实现导航栏下拉菜单的制作思路、jQuery代码实现导航栏下拉菜单Html代码以及jQuery代码实现导航栏下拉菜单Css代码三部分记载了如何使用jQuery实现导航栏下拉菜单功能，希望本文能够帮助到您。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。