Navigation drop-down menu effect made with jQuery

The navigation drop-down menu effect made with jQuery, in fact, the use of css can also achieve the navigation drop-down menu effect, but since learning jQuery, it feels better to do it with jQuery. jQuery makes navigation drop-down menu, need to use jQuery methods: children(), .mouseover(), .mouseout(), $(this), .show(), .hide() methods.

The following is part of the html and jQuery code of the Demo. jQuery refers to Baidu's jQuery library:

<!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>

The following is part of the css code:

* {
    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;
}

Navigation drop-down menu effect made with jQuery

Guess you like