PC/手机端导航按钮效果

CSS 层叠样式表

  .nav_btn {
        display: block;
        width: 36px;
        height: 3px;
        background: #fff;
        position: relative;
        margin-top: 30px;
        margin-right: 10px;
        border-radius: 4px;
        transition: all 0.3s;
    }
    .nav_btn:after,
    .nav_btn:before {
        content: "";
        width: 100%;
        position: absolute;
        top: 10px;
        left: 0;
        background: #fff;
        height: 3px;
        transition: all 0.75s;
    }
    .nav_btn:before {
        top: -10px;
    }
    .nav_btn_close {
        height: 0;
    }
    .nav_btn_close:after {
        transform: rotate(45deg);
        top: 0;
    }
    .nav_btn_close:before {
        transform: rotate(-45deg);
        top: 0;
    }

HTML 结构

<header class="header">
    <div class="wrap">
        <div class="logo"></div>
        <div class="nav_btn"></div>
        <ul id="nav">
            <li class="nav_li"><a href="/" class="active">网站首页</a></li>
			<li class="nav_li "><a class="nav_a" href="/">公司简介</a></li>
            <li class="nav_li "><a class="nav_a" href="/">新闻资讯</a></li>
            <li class="nav_li "><a class="nav_a" href="/">产品中心</a></li>
			<li class="nav_li "><a class="nav_a" href="/">案例展示</a></li>
            <li class="nav_li "><a class="nav_a" href="/">联系我们</a></li>
        </ul>
    </div>
</header>

JavaScript

 $(function() {
        $(".nav_btn").click(
            function() {
                $(this).toggleClass("nav_btn_close");
                $("#nav").slideToggle();
            }
        )
    })