手机端导航按钮使用
html部分
<div class="sp_nav" >
<span></span>
<span></span>
<span></span>
</div>
jq部分
$(function () {
var windoww = $(window).width();
$('.sp_nav').click(function () {
$('.sp_nav').toggleClass('sp_nav_se');
$(".navu").toggle();
});
});
css部分
@media (max-width: 767px){
.sp_nav {
width: 50px;
float: right;
position: relative;
cursor: pointer;
height: 30px;
margin-top: 10px;
}
.sp_nav span {
display: block;
background: #333333;
width: 30px;
height: 4px;
position: absolute;
left: 10px;
transition: all ease 0.35s;
border-radius: 2px;
}
.sp_nav span:nth-of-type(1) {
top: 0px;
}
.sp_nav span:nth-of-type(2) {
top: 10px;
}
.sp_nav span:nth-of-type(3) {
top: 20px;
}
.sp_nav_se span:nth-of-type(1) {
top: 10px;
transform: rotate(45deg);
}
.sp_nav_se span:nth-of-type(2) {
width: 0;
}
.sp_nav_se span:nth-of-type(3) {
top: 10px;
transform: rotate(-45deg);
}
}
