相应式可弹出横向导航栏的特性
在排网页时相应式可弹出导航栏能够增添你网页的雅观和可读性。在PC端时导航栏的内容能够经由过程bars来显现和隐蔽,在挪动端时也能够到达一样的结果。
结果如图所示:
代码以下(html):
<!DOCTYPE html>
<html>
<head>
<title>相应式菜单</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="demo1.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bars active">
<span></span>
<span></span>
<span></span>
</div>
<div class="nav">
<ul>
<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 src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.js"></script>
<script type="text/javascript">
$(".bars").click(function(){
$(".bars").toggleClass("active");
$(".nav").toggleClass("active");
});
</script>(掌握鼠标点下时会显现的内容)
</body>
</html>
body{
margin:0;
background:black;
}
.bars{
width:60px;
height:60px;
background:white;
position:fixed;
top:0px;
left:0px;
cursor:pointer;
z-index:1;
border-right:1px solid rgba(0,0,0.2);
}
.bars span{
display:block;
width:30px;
height:2px;
background:#262626;
position:absolute;
top:calc(50% - 1px);
left:calc(50% - 15px);
transition:.2s;
}
.bars span:nth-child(1){
transform:translateY(-10px);
}
.bars span:nth-child(3){
transform:translateY(10px);
}
.bars.active span:nth-child(1){
transform:translateY(0px) rotate(-45deg);(掌握第一个span顺时针扭转45度)
}
.bars.active span:nth-child(3){
transform:translateY(0px) rotate(45deg);(掌握第三个span逆时针扭转45度)
}
.bars.active span:nth-child(2){
transform:translateY(-100%);(掌握第二个span隐蔽)
opacity:0;
}(如许就能够构成一个封闭图标)
.nav{
height:60px;
background:#fff;
padding:0px;
margin:0px;
transition:.5s;
}
.nav.active{
transform:translate(-100%);
transition:.5s;
}
.nav ul{
float:right;
display:flex;(能够让父元素内的子元素排成一行)
list-style:none;
padding:0px 20px 0px 0px;
margin:0px;
}
.nav ul li{
border-right:1px solid rgba(0,0,0,.2);
}
.nav ul li:last-child{
border-right:none;
}
.nav ul li a{
line-height:60px;
text-decoration:none;
color:#262626;
padding:0 20px;
display:block;
}
.nav ul li a:hover{
background:#262626;
color:#fff;
}
(这里用媒体查询来完成相应式的结果)
@media screen and (max-width:640px){
.nav{
height:100vh;(指的是在手机上视口有多高,这个就有多高)
}
.nav ul{
display:block;
width:100%;
text-align:center;
padding:0px;
}
.nav ul li{
border-right:none;
border-bottom:1px solid rgba(0,0,0 .2);
}