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

方法一：
/*--汉堡菜单代码编程--*/

//定义一个复选框的input元素，并指定id或name
//使用label元素并指定for属性与input元素绑定

• 首页

/*--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文件



//代码内容

汉堡菜单

• 首页


• 下拉菜单
  
  
  
  • 项目一
  
  
  • 项目二
  
  
  • 项目三
  
  
  
  


• 产品


• 关于

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