响应式导航栏

HTML：

<div class="c-nav">
        <div class="container navFlex">
            <div class="flexItem">
                <img  class="logo" src="http://weichai.seetaoism.com/Public/Home/img/logo.jpg" />
            </div>
                
            <div class="flexItem hiden">
                <img class="btnImg" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2268238329,3394033488&fm=26&gp=0.jpg" />
            </div>
            <div class="flexItem show">
                <ul>
                    <li class="_index weichai_barBottom weichai_barBold">首页</li>
                    <li class="_newsAndAct">新闻与活动</li>
                    <li class="_powerSystem_box">工程机械专用发动机与业务解决方案</li>
                    <li class="_salesAndService">售后与服务</li>
                    <li class="_about_weichai">关于潍柴</li>
                </ul>
            </div>
        </div>
    </div>
        
        
    <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>

CSS：

* {
                    margin:0;
                    padding:0;
                    list-style-type:none;
                }
                .container {
                    max-width:900px;
                    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;
                    color: #000;
                }
                .c-nav ul li a {
                    color: black;
                    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;
                        color: #000;
                    }
                }
                @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;
                    }
                    .newsAndAct{
                        height: auto;
                        padding: 20px;
                        box-sizing: border-box;
                    }
                    .section_bottom{
                        width: auto;
                    }
                    .section_top{
                        padding: 20px;
                    }
                }
                @media screen and (max-width:576px) {
                    .c-nav {
                        background-color:#FFF;
                        padding: 10px 0px 10px 0px;
                        opacity: 0.9;
                    }
                    .c-nav .navFlex {
                        flex-wrap:wrap;
                        font-size: 20px;
                        justify-content: space-between;
                        padding-left: 20px;
                    }
                    .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;
                    }
                }