响应式可弹出横向导航栏的特点
在排网页时响应式可弹出导航栏可以增加你网页的美观和可读性。在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);
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。