这篇文章分享给大家的内容是关于css和js如何实现响应式导航菜单，内容很有参考价值，希望可以帮到有需要的小伙伴。
1.响应式导航菜单
当视口大于640px的时候，导航条会显示在外，当视口小于768px的时候，导航菜单需要隐藏起来！
代码如下：
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 vw=document.documentElement.clientWidth; if(vw>640){ menu.style.display="block"}; } }响应式
登录后复制
css代码如下：
body{ margin:0;}.nav{ background-color:black; width:100%; position:relative;}.nav ul{ margin:0; padding:0; width:80%; margin:0 auto;}.clearfix:after{ display:block; content:""; height:0; clear:both; visibility:hidden;}.nav ul li{ list-style:none; float:left;}.nav ul li a{ color:white; padding:20px 30px; display:block; text-decoration:none;}.nav ul li a:hover{ background-color:red;}.pic{ background:url(logo.jpg) no-repeat; position:absolute; top:5px; left:5px; width:113px; height:39px;}.btn{ background-color:#333; text-align:right; color:white; font-size:20px; padding:10px; display:none;}@media screen and (max-width:640px){ .nav ul li{ float:none; text-align:center; } .nav ul{ width:100%; } .btn{ display:block; } .pic{ position:absolute; left:50%; margin-left:-56px; }}
登录后复制
相关推荐：
如何用css和js移动端分别判断手机横竖屏的状态
以上就是css和js如何实现响应式导航菜单的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2894863.html
