1. 簡單的導航欄
首先通過一個入門級的導航欄來練習一下
1.1 先佈局好html的結構
1.2 通過css樣式得到想要的導航效果
上面第一個例子讓大家簡單的瞭解了菜單欄的原理，在不同過js的情況下，就可以輕鬆實現二級菜單欄，三級菜單也可以在此基礎上添加。至於一些細節的處理，就要靠大家自己去調整了。
在例子一中，其實還有個坑，就是在二級菜單展示之後，會影響下方容器的佈局。
從上圖中可以很清楚的看到，子菜單在隱藏和顯示的時候會對其他標籤產生影響
在第二個例子中，就對這一問題進行了處理
2. 升級版翻轉菜單導航欄
爲了解決例子一中，二級菜單會隱藏和顯示兩種狀態下會影響原來標籤樣式的佈局，做以下優化
<head>
<meta charset="UTF-8">
<title>菜單欄</title>
<style>
*{
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: 5px 10px;
background-color: rgba(100, 149, 237,0.8);
}
.testBody>nav>ul>li>ul>li{
padding: 5px 10px;
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:hover ul{
display: block;
}
.test1{
background-color: yellow;
width: 200px;
height: 100px;
}
/**例子2**/
.test2Body{
width: 80%;
margin: 0 auto;
}
.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:hover ul{
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);
}
@keyframes navAnim
{
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}
</style>
</head>
<body>
<div class="testBody">
<header>
假裝有logo
</header>
<nav>
<ul>
<li>
菜單一
<ul>
<li>子菜單一</li>
<li>子菜單二</li>
<li>子菜單三</li>
<li>子菜單四</li>
</ul>
</li>
<li>
菜單二
<ul>
<li>子菜單一</li>
<li>子菜單二</li>
<li>子菜單三</li>
<li>子菜單四</li>
</ul>
</li>
<li>
菜單三
<ul>
<li>子菜單一</li>
<li>子菜單二</li>
<li>子菜單三</li>
<li>子菜單四</li>
</ul>
</li>
<li>
菜單四
<ul>
<li>子菜單一</li>
<li>子菜單二</li>
<li>子菜單三</li>
<li>子菜單四</li>
</ul>
</li>
</ul>
</nav>
<div class="test1">
<p>
我是下方容器
</p>
</div>
</div>
<div class="test2Body">
<nav>
<ul class="closeFloat">
<li>菜單一
<ul>
<li><a>子級菜單1</a></li>
<li><a>子級菜單2</a></li>
<li><a>子級菜單3</a></li>
</ul>
</li>
<li>菜單二</li>
<li>菜單三
<ul>
<li><a>子級菜單1</a></li>
<li><a>子級菜單2</a></li>
<li><a>子級菜單3</a></li>
<li><a>子級菜單4</a></li>
<li><a>子級菜單5</a></li>
</ul>
</li>
<li>菜單四</li>
<li>菜單五</li>
</ul>
</nav>
</div>
<div class="testBottom">
菜單欄是否會影響我呢？
</div>
</body>
3. 側邊菜單欄
除了水平方向的菜單欄外，工作中也時常需要使用到側邊菜單欄
首先依舊先看html結構
因爲懶。。所以，js效果直接用jq寫了
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/iconfont1.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<style>
*{ 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: 0px 0px 2px #EEEEEE;}
.titleStair{ font-size: 16px; line-height: 45px; padding: 0 12px; 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: 2px 0; }
.stairUL>li>i{ margin-right: 2px; }
</style>
</head>
<body>
<div class="sideNav">
<div class="oneStair">
<div class="titleStair">
<i class="iconfont icon-home"></i><h4>一級菜單1</h4><i class="iconfont icon-xiajiantou pullDown pullDown1"></i>
</div>
<ul class="stairUL">
<li><i class="iconfont icon-iconfontwendang"></i>子級菜單1</li>
<li><i class="iconfont icon-iconfontwendang"></i>子級菜單2</li>
<li><i class="iconfont icon-iconfontwendang"></i>子級菜單3</li>
</ul>
</div>
<div class="oneStair">
<div class="titleStair">
<i class="iconfont icon-gongnengdingyi"></i><h4>一級菜單2</h4><i class="iconfont icon-xiajiantou pullDown pullDown1"></i>
</div>
<ul class="stairUL">
<li><i class="iconfont icon-iconfontwendang"></i>子級菜單1</li>
<li><i class="iconfont icon-iconfontwendang"></i>子級菜單2</li>
<li><i class="iconfont icon-iconfontwendang"></i>子級菜單3</li>
</ul>
</div>
<div class="oneStair">
<div class="titleStair">
<i class="iconfont icon-tiaoshi"></i><h4>一級菜單3</h4><i class="iconfont icon-xiajiantou pullDown pullDown1"></i>
</div>
<ul class="stairUL">
<li><i class="iconfont icon-iconfontwendang"></i>子級菜單1</li>
<li><i class="iconfont icon-iconfontwendang"></i>子級菜單2</li>
<li><i class="iconfont icon-iconfontwendang"></i>子級菜單3</li>
</ul>
</div>
</div>
</body>
<script>
$(function(){
$(".pullDown").click(function(){
$(this).toggleClass("pullDown1");
$(this).parent().parent().children(".stairUL").slideToggle();
});
});
</script>
作者：雷靈初心
鏈接：https://www.imooc.com/article/266276#
來源：慕課網