这篇文章分享给大家的内容是关于css实现响应下拉式菜单的代码，内容很有参考价值，希望可以帮到有需要的小伙伴。
一、简介
响应式下拉菜单可在多个移动端显示会有不同的效果。
二、代码如下
var btn=document.getElementById("btn"); var menu=document.getElementById("menu"); btn.onclick=function(){ //alert(1); if(menu.style.display=="none"){ menu.style.display="block"; }else{ menu.style.display="none"; } } window.onresize=function(){ var vw=document.documentElement.clienWidth; if(vw>640){ menu.style.display="block"; } }响应式下拉菜单 @@##@@
登录后复制
body{
margin:0;
登录后复制
}
.nav{
width:100%;background-color:#00316b;position:relative;
登录后复制
}
ul{
立即学习“前端免费学习笔记（深入）”；
padding:0px;margin:0px;width:80%;margin:0 auto;background:#00316b;
登录后复制
}
ul>li{
list-style:none;float:left;
登录后复制
}
ul>li>a{
color:#fff;text-decoration:none;display:block;padding:20px 30px;
登录后复制
}
ul>li:hover{
background-color:red;
登录后复制
}
.clearfix:after{
display:block;content:"";height:0px;visibility:hidden;clear:both;
登录后复制
}
.clearfix{
zoom:1;
登录后复制
}
.toggle{
text-align:right;color:#fff;padding:20px;font-size:20px;background:black;/* background-color:#001r44; */display:none;overflow:hidden;
登录后复制
}
.tu{
float:left;
登录后复制
}
.bb{
position:absolute;background-image:url(shitu2.png);background-repeat:no-repeat;background-size:100px;width:100px;height:40px;left:20px;top:10px;
登录后复制
}
----------body{ margin:0;}.nav{ width:100%; background-color:#00316b;}ul{ padding:0px; margin:0px; width:100%; margin:0 auto; background:#00316b;}ul>li{ text-align:center; list-style:none; /* float:left; */}ul>li>a{ color:#fff; text-decoration:none; display:block; padding:20px 30px;}ul>li:hover{ background-color:red;}.clearfix:after{ display:block; content:""; height:0px; visibility:hidden; clear:both;}.clearfix{ zoom:1;}.toggle{ text-align:right; color:#fff; padding:20px; background:yellow; font-size:20px; overflow:hidden; display:block;}.tu{ float:left; width:100px;}
登录后复制
第三、效果图如下
这是视口大于1024px的时候所显示的内容
min-width:1024px
这是视口小于1024px的时候所显示的内容
max-width:1024px
这是在手机上和iPad上的效果图
相关推荐：
css和js如何实现响应式导航菜单
css和js如何实现响应式导航菜单
以上就是css实现响应下拉式菜单的代码的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2894855.html
