Maison > Article > interface Web > Comment implémenter un menu de navigation réactif avec CSS et JS
Comment implémenter un menu de navigation réactif avec CSS et JS
- 不言original
- 2018-07-24 10:31:342745parcourir
Le contenu partagé avec vous dans cet article explique comment implémenter un menu de navigation réactif avec CSS et js. Le contenu est d'une grande valeur de référence et j'espère qu'il pourra aider les amis dans le besoin.
1. Menu de navigation réactif
Lorsque la fenêtre d'affichage est plus grande que 640 pixels, la barre de navigation sera affichée à l'extérieur lorsque la fenêtre d'affichage est plus petite. que 768px Parfois, le menu de navigation doit être masqué !
Le code est le suivant :
<!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>
Le code CSS est le suivant :
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;
}
}
Recommandations associées :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!