响应下拉式菜单

最新推荐文章于 2021-10-30 10:33:23 发布

weixin_34416754

最新推荐文章于 2021-10-30 10:33:23 发布

阅读量259

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000015737717

版权

一、简介

响应式下拉菜单可在多个移动端显示会有不同的效果。

二、代码如下

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width"/>
        <title>响应式下拉菜单</title>
        <link rel="stylesheet" type="text/css" href="demo020.css" media="screen and (min-width:1024px)"/>
        <link rel="stylesheet" type="text/css" href="demo021.css" media="screen and (max-width:1024px)"/>
        <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    </head>
    <body>
        <div class="nav">
            <div class="toggle">
                <img class="tu" src="shitu2.png"/>
                <i id="btn" class="fa fa-bars"></i>
            </div>    
            <div class="bb"></div>
            <ul id="menu" class="clearfix">
                <li><a href="#">First</a></li>
                <li><a href="#">Second</a></li>
                <li><a href="#">Third</a></li>
                <li><a href="#">Fourth</a></li>
                <li><a href="#">Fifth</a></li>
            </ul>
        </div>
        <script type="text/javascript">
            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";
                }
            }
        </script>
    </body>
</html>

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的时候所显示的内容<PC端>
min-width:1024px
图片描述

这是视口小于1024px的时候所显示的内容<手机>
max-width:1024px
这是在手机上和iPad上的效果图
图片描述

weixin_34416754

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应下拉式菜单

一、简介响应式下拉菜单可在多个移动端显示会有不同的效果。二、代码如下<!doctype html><html> <head> <meta charset="utf-8"/> <meta name="viewport" content="w...
复制链接

扫一扫

响应下拉式菜单

一、简介

二、代码如下

第三、效果图如下

“相关推荐”对你有帮助么？