<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=750,user-scalable=no" />
<title>导航栏</title>
<link rel="stylesheet" href="css/nav.css" />
</head>
<body>
<nav class='nav-sub'>
<ul>
<li><a href="">></a></li>
<li><h3>导航栏</h3></li>
<li>
<div class="btn show">
<span></span>
<span></span>
<span></span>
</div>
</li>
</ul>
<section class="sub-nav-list">
<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>
<li>
<a href="">首页6</a>
</li>
</ul>
</section>
</nav>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(".btn").click(function(){
$(".sub-nav-list").slideToggle(100);
$(this).toggleClass('show');
})
</script>
</body>
</html>
样式
*{
margin:0;
padding: 0;
border:0;
}
ul,li{
list-style: none;
}
nav{
overflow: hidden;
background: gold;
//为什么display: inline-block;设置li.33.33%还挤出去，是因为没有给ul字体设置0；
>ul{
100%;
padding: 0px 20px;
box-sizing: border-box;
font-size: 0px;
>li{
display: inline-block;
33.33%;
height: 100px;
line-height: 100px;
text-align: center;
font-size:30px;
color:white;
>a{
float:left;
text-decoration: none;
}
>div.btn{
float: right;
margin-top:20px;
50px;
position: relative;
>span{
display: block;
50px;
height: 3px;
background: darkgoldenrod;
margin-top:10px;
transition: all 0.4s;
}
}
>div.show{
margin-top: 40px;
>span:first-child{
transform-origin: center center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transform: rotate(45deg);
}
>span:nth-child(2){
display: none;
margin: 0;
}
>span:last-child{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transform: rotate(-45deg);
}
}
}
}
>section{
>ul{
font-size: 0px;
>li{
33.33%;
margin-bottom: 20px;
display: inline-block;
border:1px solid red;
font-size: 16px;
text-align: center;
box-sizing: border-box;
}
}
}
}