一、简单的导航栏
首先通过一个入门级的导航栏来练习一下
1、先布局好html的结构
2、通过css样式得到想要的导航效果
上面第一个例子让大家简单的了解了菜单栏的原理，在不同过js的情况下，就可以轻松实现二级菜单栏，三级菜单也可以在此基础上添加。至于一些细节的处理，就要靠大家自己去调整了。
在例子一中，其实还有个坑，就是在二级菜单展示之后，会影响下方容器的布局。
从上图中可以很清楚的看到，子菜单在隐藏和显示的时候会对其他标签产生影响
在第二个例子中，就对这一问题进行了处理
二、升级版翻转菜单导航栏
为了解决例子一中，二级菜单会隐藏和显示两种状态下会影响原来标签样式的布局，做以下优化
菜单栏
*{
padding:0;
margin:0;
}
ol,ul,li{
list-style:none;
}
.testBody>header{
line-height:50px;
background-color:dodgerblue;
}
.testBody>nav{
font-size:14px;
background-color:cornflowerblue;
height:30px;
}
.testBody>nav>ul{
width:100%;
background-color:rgba(100,149,237,1);
}
.testBody>nav>ul>li{
float:left;
padding:5px10px;
background-color:rgba(100,149,237,0.8);
}
.testBody>nav>ul>li>ul>li{
padding:5px10px;
background-color:rgba(100,149,237,0.6);
}
.testBody>nav>ul>li>ul{
display:none;
}
.testBody>nav>ul>li:hover{
color:white;
background-color:burlywood;
}
.testBody>nav>ul>li:hoverul{
display:block;
}
.test1{
background-color:yellow;
width:200px;
height:100px;
}
/**例子2**/
.test2Body{
width:80%;
margin:0auto;
}
.testBottom{
background-color:aquamarine;
}
.test2Body>nav>ul{
width:100%;
background-color:dodgerblue;
text-align:center;
font-size:14px;
}
.test2Body>nav>ul>li{
position:relative;
float:left;
line-height:50px;
width:20%;
box-sizing:border-box;
}
.test2Body>nav>ul>li:hover{
color:white;
background-color:rgba(255,255,255,0.5);
}
.test2Body>nav>ul>li:hoverul{
display:block;
}
.test2Body>nav>ul>li>ul{
display:none;
position:absolute;
width:100%;
z-index:100;
background-color:dodgerblue;
}
.test2Body>nav>ul>li>ul>li{
display:inline-block;
width:100%;
background-color:rgba(255,255,255,0.5);
animation-name:navAnim;
}
.test2Body>nav>ul>li>ul>li:nth-of-type(1){
animation-duration:0.25s;
}
.test2Body>nav>ul>li>ul>li:nth-of-type(2){
animation-duration:0.5s;
}
.test2Body>nav>ul>li>ul>li:nth-of-type(3){
animation-duration:1s;
}
.test2Body>nav>ul>li>ul>li:nth-of-type(4){
animation-duration:1.5s;
}
.test2Body>nav>ul>li>ul>li:nth-of-type(5){
animation-duration:2s;
}
.test2Body>nav>ul>li>ul>li:hover{
color:white;
background-color:rgba(255,255,255,0);
}
@keyframesnavAnim
{
0%{transform:rotateY(180deg)}
50%{transform:rotateY(90deg)}
100%{transform:rotateY(0deg)}
}
.closeFloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.closeFloat{zoom:1}
假装有logo
菜单一
子菜单一子菜单二子菜单三子菜单四
菜单二
子菜单一子菜单二子菜单三子菜单四
菜单三
子菜单一子菜单二子菜单三子菜单四
菜单四
子菜单一子菜单二子菜单三子菜单四
我是下方容器
菜单一子级菜单1子级菜单2子级菜单3菜单二菜单三子级菜单1子级菜单2子级菜单3子级菜单4子级菜单5菜单四菜单五
菜单栏是否会影响我呢？
三、侧边菜单栏
除了水平方向的菜单栏外，工作中也时常需要使用到侧边菜单栏
首先依旧先看html结构
因为懒。。所以，js效果直接用jq写了
Title
*{margin:0;padding:0;}
ol,ul,li{list-style:none;}
.sideNav{width:200px;position:fixed;top:0;bottom:0;background-color:#292929;color:white;}
.oneStair:hover{background-color:#111;text-shadow:0px0px2px#EEEEEE;}
.titleStair{font-size:16px;line-height:45px;padding:012px;box-sizing:border-box;}
.titleStair*{display:inline-block;}
.titleStair>h4{text-indent:1em;}
.pullDown{float:right;}
.pullDown1{transform:rotate(-90deg);}
.stairUL{display:none;font-size:13px;padding-left:40px;padding-right:12px;box-sizing:border-box;}
.stairUL>li{display:flex;align-items:center;padding:2px0;}
.stairUL>li>i{margin-right:2px;}
一级菜单1
子级菜单1子级菜单2子级菜单3一级菜单2
子级菜单1子级菜单2子级菜单3一级菜单3
子级菜单1子级菜单2子级菜单3$(function(){
$(".pullDown").click(function(){
$(this).toggleClass("pullDown1");
$(this).parent().parent().children(".stairUL").slideToggle();
});
});
