PC/移动端 导航栏

一：首先展示效果图

二：直接展示代码（HTML)代码，

        <nav class="nav">
            <div class="navdiv">
                <div class="aa">logo</div>
                <div class="bb">
                    <ul>
                        <li><a href="#">栏目1</a></li>
                        <li><a href="#">栏目2</a></li>
                        <li><a href="#">栏目3</a></li>
                        <li><a href="#">栏目4</a></li>
                        <li><a href="#">栏目5</a></li>
                    </ul>
                </div>
                <div class="navspan hide">
                    <ul>
                        <li class="span1"></li>
                        <li class="span2"></li>
                        <li class="span3"></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="contentbox"></div>

三：JS一些简单的判断

    var num = 0;
        $(".navspan").click(function() {
            num++;
            console.log(num)
            if (num % 2 != 0) {
                $(".bb").addClass("show")
                $(".navspan").addClass("ccc")
                $(".span2").addClass("option")
                $(".span1").addClass("rota1")
                $(".span3").addClass("rota3")
            } else {
                $(".bb").removeClass("show")
                $(".span2").removeClass("option")
                $(".span1").removeClass("rota1")
                $(".span3").removeClass("rota3")
            }
        })

四：CSS格式代码

    html,
            body {
                margin: auto;
                padding: 0px;
                background-color: #c3a54a;
            }

            .bb ul {
                text-align: end;
            }

            .bb li {
                text-align: center;
                width: 15%;
                display: inline-block;
            }

            a:hover {
                cursor: pointer;
                color: darkcyan;
            }

            .aa {
                width: 100px;
                text-align: center;
                line-height: 50px;
                font-size: 20px;
                font-weight: 600;
            }

            .bb {
                -webkit-box-flex: 1;
            }

            .nav {
                width: 100%;
                height: 54px;
                background: #c3a54a;
                color: aliceblue;
                border-bottom: 1px solid #8a8a8a;
            }

            .navdiv {
                margin: auto;
                width: 80%;
                display: -webkit-box;
            }

            .contentbox {
                margin: 10px 0px;
                border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
                width: 100%;
                height: 200px;
                background-color: darkcyan;
            }

            .contentbox img {
                width: 200px;
                height: 200px;
            }

            .hide {
                transition: 0.2s;
                display: none;
            }

            .option {
                opacity: 0;
            }

            .rota1 {
                margin-top: 15px !important;
                transform: rotate(45deg);
                transition: 0.2s;
            }

            .rota3 {
                margin-top: -14px !important;
                transform: rotate(-45deg);
                transition: 0.2s;
            }

            .navspan:hover {
                cursor: pointer;
            }

            a {
                color: white;
                text-decoration: none;
            }

            .navspan ul {
                margin: auto;
                padding: 0px;
            }

            .navspan li {
                width: 25px;
                height: 2px;
                background: white;
                list-style: none;
                line-height: 5px;
                margin: 5px 0px;
            }

            .navspan {
                position: absolute;
                width: 40px;
                height: 40px;
                margin-top: 15px;
                right: 0px;
            }

            .show {
                display: block !important;
            }

            @media screen and (max-width:600px) {
                .nav {
                    background: rebeccapurple;
                }

                .navdiv {
                    width: 100%;
                }

                .bb {
                    display: none;
                    -webkit-box-flex: inherit;
                    position: absolute;
                    width: 100%;
                    margin-top: 40px;
                    line-height: 45px;
                }

                .navspan {
                    display: block;
                }

                .bb li {
                    text-align: center;
                    width: 100%;
                    display: block;
                    background: #00000040;
                    border-bottom: 1px solid #d6d6d6;
                }

                .bb ul {
                    padding: 0px;
                }
            }

五：最后这个链接是一个大概的动态效果，有兴趣的可以点击去看看具体效果https://s31.aconvert.com/convert/p3r68-cdx67/dvoma-mdppm.gif，当然也有很多地方不完善，欢迎指点。