响应式导航菜单
响应式导航菜单就是当网页在其他不同视口的样式，不同的设备需要不同的样式
需要掌握的知识
- 掌握媒体查询，如果你不是很懂那就看我写的CSS响应式布局
- 掌握CSS重的display：none;
- 简单的JS方法
下面是HTML代码
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>响应式菜单</title>
<link rel="stylesheet" type="text/css" href="demo01.css"/>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<div class="btn">
<i id="btn" class="fa fa-bars"></i>
</div>
<div class="pic"></div>
<ul id="menu" class="clearfix">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">购买</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
</body>
</html>CSS样式
*{
margin:0;
padding:0;
text-decoration:none;
list-style:none;
}
.nav{
background:blue;
width:100%;
position:relative;
}
.pic{
background:url(bottom.jpg) no-repeat;
position:absolute;
width:128px;
height:46px;
top:8px;
left:60px;
}
.btn{
font-size:20px;
color:#fff;
background:#13138a;
display:none;
}
.btn i{
padding:20px;
}
ul{
margin-left:200px;
}
ul li{
float:left;
}
ul li a:hover{
background:pink;
}
ul li a{
display:block;
padding:20px 30px;
color:#fff;
}
.clearfix:after{
display:block;
height:0;
content:"";
visibility:hidden;
clear:both;
}
@media screen and (max-width:768px){
ul li{
float:none;
width:100%;
text-align:center;
}
ul{
width:100%;
display:none;
margin:0;
}
.btn{
display:block;
}
.pic{
left:50%;
margin-left:-64px;
}
}js代码：
<script type="text/javascript">
var btn=document.getElementById("btn");
var menu=document.getElementById("menu");
btn.onclick=function(){
if(menu.style.display=="block"){
menu.style.display="none";
}else{
menu.style.display="block";
}
window.onresize=function(){
var ww=document.documentElement.clientWidth;
if(ww>768){
menu.style.display="block";
}
}
}
</script>