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();
}
)
})