CSS+JS相应式导航菜单-CSDN博客

响应式导航菜单

响应式导航菜单就是当网页在其他不同视口的样式，不同的设备需要不同的样式

需要掌握的知识

-　掌握媒体查询，如果你不是很懂那就看我写的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>

CSS+JS相应式导航菜单

响应式导航菜单

响应式导航菜单就是当网页在其他不同视口的样式，不同的设备需要不同的样式

需要掌握的知识

当视口大于768px的时候：

当视口小于768px的时候，导航菜单需要隐藏起来：

持续更新，欢迎大家指教