Heim > Artikel > Web-Frontend > So implementieren Sie ein responsives Navigationsmenü mit CSS und JS
So implementieren Sie ein responsives Navigationsmenü mit CSS und JS
- 不言Original
- 2018-07-24 10:31:342754Durchsuche
这篇文章分享给大家的内容是关于css和js如何实现响应式导航菜单，内容很有参考价值，希望可以帮到有需要的小伙伴。
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>
<p class="nav">
<p class="pic"></p>
<p class="btn">
<i id="btn" class="fa fa-bars"></i>
</p>
<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>
</p>
<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;
}
}
相关推荐：
Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein responsives Navigationsmenü mit CSS und JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie verstecke ich HTML-Elemente mit CSS? Vier Möglichkeiten, HTML-Elemente auszublendenNächster Artikel：Wie verstecke ich HTML-Elemente mit CSS? Vier Möglichkeiten, HTML-Elemente auszublenden