快速搭建响应式导航栏汉堡菜单

方法一：
/*--汉堡菜单代码编程--*/
<div class="header">
<nav>
<input type="checkbox" id='togglebox' /> //定义一个复选框的input元素，并指定id或name
//使用label元素并指定for属性与input元素绑定
<label class="menu" for='togglebox'><span class="glyphicon glyphicon-list"></span></label>
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
</ul>
</nav>
</div>

/*--css样式--*/
.header{
width:100%;
background: #7ddf6c;
padding:3px 0;
position: relative;
}
nav input[type="checkbox"],.menu{
position:absolute;
left:2%;
top:10px;
display:none
}
nav,nav ul{
margin:0;
padding:0;
}
nav ul li{
margin:0 25px;
display:inline-block
}
nav ul li a{
text-decoration: none;
color:#fff;
font-size:1.25em;
}
nav ul li a:hover,nav ul li a.active{
color:#000;
}
/*--使用媒体查咨询--*/
@media (max-width:640px){
.header{
padding:25px 0;
}
/*显示菜单图标，并指定光标样式*/
.menu{
display:block;
cursor:pointer;
}
//隐藏菜单列表
nav>ul{
display:none;
}
//设置checkbox被选中时显示菜单
nav input[type="checkbox"]:checked~ul{
display:block;
}
//设置列表项样式
nav ul li{
width:100%;
display:inline-block;
text-align: center;
margin:0;
padding:0;
}
nav ul li a{
display:block;
margin:4%;
}
}

方法二：
/*使用bootstrap中的js插件实现响应式导航折叠菜单*/
//导入bootstrap的css文件和js文件
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
//代码内容
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-brand"><img src="" alt="" /></a>
<!--设计响应式折叠菜单按钮 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">汉堡菜单</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li class="dropdown" data-target="#dropdown-menu"><a href="#" data-toggle="dropdown" >下拉菜单<i class="caret"></i></a>
<ul class="dropdown-menu" id="dropdown-menu">
<li><a href="#">项目一</a></li>
<li><a href="#">项目二</a></li>
<li><a href="#">项目三</a></li>
</ul>
</li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
</div>

转载于:https://www.cnblogs.com/hlhao/p/10802562.html