利用jQuery制作的导航下拉菜单效果

曾经终败给现在 2022-11-09 12:49 209阅读 0赞

利用jQuery制作的导航下拉菜单效果，其实利用css同样可以实现导航下拉菜单效果，但自从学习了jQuery后，感觉还是jQuery做起来效果更好。jQuery制作导航下拉菜单，需要用到jQuery方法有：children()、.mouseover()、.mouseout()、$(this)、.show()、.hide()方法。

以下是Demo的html和jQuery部分代码，jQuery引用的是百度的jQuery库:

<!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 () {
                //鼠标经过的时候显示li下的ul
                $(".nav>li").mouseover(function () {
                    $(this).children("ul").show();
                });
               //鼠标离开的时候隐藏li下的ul
                $(".nav>li").mouseout(function () {
                    $(this).children("ul").hide();
                })
            })
        </script>
    </body>
    </html>

以下是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;
    }