jQuery[响应式]⾃适应⽹页顶部导航菜单
[响应式] ⾃适应⽹页顶部导航菜单<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta
name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <title>jQuery ⾃适应⽹页顶部导航菜单</title>    <style type="text/css" media="screen">        *{margin:0;padding:0;list-style-type:none;}.container{max-width:1140px;margin:0 auto;}.c-nav .show{display:inline-block;}.c-nav .hiden{display:none;}/* 导航栏 */.c-nav{width:100%;background-color:black;}.c-nav .navFlex{display:flex;display:-webkit-flex;justify-content:space-between;-webkit-justify-content:space-between;align-items:center;-webkit-align-conten
.c-nav ul{list-style:none;margin-bottom:0px;padding-left:0px;}.c-nav ul li{padding:15px 0px 15px 0px;margin-left:30px;display:inline-block;}.c-nav ul li a{color:white;padding-bottom:2px;text-decoration:none;border-bottom:3px solid transparent;}.c-nav ul li a:hover{border-bottom:3px solid #e4c17e;}.c-nav .logo{height:40px;}.c-nav .btnImg{height:20px;width:25px;padding:3px 8px 3px 8px;box-sizing:content-box;border:1px solid transparent;}@media screen and (max-width:1200px){    .c-nav ul li{margin-left:20px;}}@media screen and (max-width:992px){    .c-nav ul li{margin-left:10px;}}@media screen and (max-width:768px){    .c-nav ul li:nth-child(4),.c-nav ul li:nth-child(5){display:none;}}@media screen and (max-width:576px){    .c-nav{background-color:rgba(176,204,243,0.8);padding:10px 0px 10px 0px;opacity:0.9;}    .c-nav .navFlex{flex-wrap:wrap;font-size:20px;justify-content:space-between;}    .c-nav .logo{height:30px;}    .c-nav ul li{p
adding-top:10px;margin-left:0px;display:block;}    .c-nav ul li a{border-bottom:3px solid transparent;}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
js导航栏下拉菜单25
26
27
28
29
30
31
32
33
34
35
36
.c-nav ul li a{border-bottom:3px solid transparent;}    .c-nav ul a:hover{border-bottom:3px solid #e4c17e;}    .c-nav ul li:nth-child(4),.c-nav ul li:nth-child(5){display:block;}    .c-nav .hiden{display:block;}    .c-nav .show{width:100%;font-size:14px;text-align:center;display:none;}}    </style></head><body>    <div class="c-nav">        <div class="container navFlex">            <div class="flexItem">                <img class="logo" src="img/wunsun-logo.png" />            </div>            <div class="flexItem hiden">                <img class="btnImg" src="img/navBtn.png" />            </div>            <div class="flexItem show">                <ul>                    <li><a href="#">⾸页</a></li>                    <li><a href="#">品牌故事</a></li>                    <li><a href="#">产品中⼼</a></li>                    <li><a href="#">⽹上商城</a></li>                    <li><a href="#">招商加盟</a></li>                    <li><a href="#">⾏业新闻</a></li>                    <li><a href="#"></a></li>                </ul>            </div>        </div>    </div>    <script type="text/javascript" src="cdn.bootcss/jquery/3.4.1/jquery.js"></script>    <script type="text/javascript">        //
⽤于判断导航栏的状态        var toggle = true;        //导航栏按钮        $('.btnImg').click(function () {            if (toggle) {                $('.btnImg').css("border", "1px solid #b0ccf3");                toggle = false            } else {                $('.btnImg').css("border", "1px solid transparent");                toggle = true;            }            $(".show").slideToggle(300);        })        //窗⼝⼤⼩发⽣改变        $(window).resize(function () {            //获取窗⼝宽度            var windSize = $(window).width();            if (windSize > 576) {                $(".show").slideDown(0);            } else {                $(".show").slideUp(0);            }        });    </script></body></html>3637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。