使用jquery实现的自适应导航

话不多说，直接晒代码

 

<div class="headering">
            <div class="header-top">
                <div class="btn-header">
                    <a href="#">网站logo</a>
                    <button id="btn">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                </div>
                <div class="nav-tab">
                    <div class="nav">
                        <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>
                        </ul>
                    </div>
                    <div class="about"><a href="#">tel:12345678901</a></div>
                </div>
            </div>
        </div>

css代码（nav.css）

{margin: 0px;padding:0px;color:#9D9D9D;font-size: 0;}
html body{width: 100%;}
a{text-decoration: none;font-size: 14px;}
li{list-style: none;}
/* 头部 */
.headering{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 48px;
    background-color: #222;
    border-bottom: 1px solid #000;
    position: fixed;
    z-index: 3;
}
.header-top{position: relative;}
.header-top{ width: 1170px;margin: 0 auto;padding-left: 22px;padding-right: 22px;box-sizing: border-box;}
.header-top .btn-header{width: 100%;position: relative;}
.btn-header a{font-size: 20px;font-weight: 400;}
.btn-header a:hover,
.nav ul li a:hover,
.about a:hover{color: #fff;}
.btn-header button,
.about{float: right;}
.btn-header button{
    background-color: transparent;
    border:1px solid #333;
    border-radius: 1px;
    padding: 9px 10px;
    margin: 8px 15px 0px 0;
    display: none;
    outline: none;
}
.btn-header button span{
    display: block;
    width: 22px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;
}
.btn-header button span:not(:nth-of-type(1)){
    margin-top: 4px;
}
.header-top .nav-tab{
    position: absolute;
    top:2px;
    left: 200px;
    width: 80%;
}
.nav{
    float: left;
}
.nav ul li{
    float: left;
    font-size: 14px;
}
.nav ul li a{
    padding: 0 15px;
}
.show{height:350px;transition: all 2s linear;visibility: visible;opacity: 0;}
.hide{transition: all 2s linear;visibility: hidden;opacity: .6;}

css代码（app.css）响应式代码

@media screen and (min-width:992px) and (max-width:1200px){
    *{
        box-sizing: border-box;
        padding: 0px;
        margin: 0px;
    }
    .header-top,{
        width: 970px;
        /* border:1px solid red; */
        margin: 0 auto;
        padding: 0 22px;
    }
    .nav ul li:first-of-type{
        display: none;
    }
    .about{
        margin-right: 40px;
    }
  } 
  @media screen and (min-width:768px) and (max-width:991px){
    *{
        box-sizing: border-box;
        padding: 0px;
        margin: 0px;
    }
    .header-top,{
        width: 750px;
        /* border:1px solid red; */
        margin: 0 auto;
        padding: 0 22px;
    }
    .header{
        min-height: 40px;
    }
    .nav ul li:first-of-type,
    .btn-header a,
    .about{
        display: none;
    }
    .header-top .nav-tab{
        top:-25px;
        left: 15px;
    }
  } 
  @media screen and (max-width:767px){
    .btn-header button{
        display: block;
        float: right;
        margin: 10px 0 0 0;

    }
    .header-top .nav-tab{
        width: 100%;
        background-color: #222;
        left: 0px;
        top: 50px;
        padding-left: 10px;
        border-top: 1px solid #393939;
        display: none;
        border-top: 1px solid transparent;
        -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.1);     
    }
    .about{
        position: absolute;
        bottom: 11px;
        left: 25px;
        display: none;
    }
    .nav ul li{
        clear: both;
    }
    .about2 div{
        margin-bottom: 10px;
    }
  }

jq代码

先引入jq插件：<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js'></script>

// 导航PC端和手机端的显示切换
$(window).resize(function () {
    myResize();
});
window.onload=function(){
    $("#btn").click(function(){
         $(".nav-tab").slideToggle(600);
    })
}
function myResize(){
    if($(window).width() >= 768){
        $(".nav-tab").show();
    }else{
        $(".nav-tab").hide();
    }
}