响应式导航菜单（css+js）

最新推荐文章于 2024-04-20 12:00:51 发布

weixin_34292402

最新推荐文章于 2024-04-20 12:00:51 发布

阅读量2.2k

点赞数 1

文章标签： javascript ViewUI

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

版权

1.响应式导航菜单

先来看下效果图把：
图片描述

当视口大于640px的时候，导航条会显示在外，当视口小于768px的时候，导航菜单需要隐藏起来！
代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width">
    <title>响应式</title>

    <link rel="stylesheet" type="text/css" href="demo1.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="pic"></div>
        <div class="btn">
            <i id="btn" class="fa fa-bars"></i>
        </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>
    
    <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 vw=document.documentElement.clientWidth;
                if(vw>640){
                menu.style.display="block"};
            }
        }
    </script>

</body>
</html>

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;
    }
}

持续更新，欢迎大家指教！

weixin_34292402

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
响应式导航菜单（css+js）

1.响应式导航菜单先来看下效果图把：当视口大于640px的时候，导航条会显示在外，当视口小于768px的时候，导航菜单需要隐藏起来！代码如下：<!doctype html><html><head> <meta charset="utf-8"/> <meta n...
复制链接

扫一扫

响应式导航菜单（css+js）

1.响应式导航菜单

持续更新，欢迎大家指教！

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