响应式导航菜单响应式导航菜单就是当网页在其他不同视口的样式，不同的设备需要不同的样式需要掌握的知识- 掌握媒体查询，如果你不是很懂那就看我写的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>当视口大于768px的时候：当视口小于768px的时候，导航菜单需要隐藏起来：持续更新，欢迎大家指教
