jQuery[响应式] 自适应网页顶部导航菜单

最新推荐文章于 2021-04-26 22:28:32 发布

gqzydh

最新推荐文章于 2021-04-26 22:28:32 发布

阅读量2.6k

点赞数 1

分类专栏： Html 实例 JQuery 文章标签： jQuery响应式导航响应式

本文链接：https://blog.csdn.net/gqzydh/article/details/102314569

版权

实例同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

Html

7 篇文章 0 订阅

订阅专栏

JQuery

3 篇文章 0 订阅

订阅专栏

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-content:center;color:white;}
.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{padding-top:10px;margin-left:0px;display:block;}
    .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="https://cdn.bootcss.com/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>