導航欄在我們的頁面開發中相當重要。而且方法也多種多樣，實現效果多種多樣。這次先整理2級橫向的導航欄，有空再整理縱向和多級導航欄。
首先是頁面的基礎樣式，後面的所有樣式和js都是根據這個樣式爲基礎進行改寫。
其實對於14行的樣式需要注意的是a.on和a .on的區別。a.on是同級關係，a標籤內的class類on。a .on是父子關係，a標籤下子類元素的on類。這是不同的。需要注意！
另外一個比較重要大的點是jquery裏面[attribute^=value]是指匹配給定的屬性是以某些值開始的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>下拉導航欄</title>
<style type="text/css">
*{ margin:0; padding: 0; }
a{ text-decoration: none; }
.nav{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; }
.list{ width: 90%; height: 40px; margin: 0 auto; list-style-type: none; }
.list li{ float: left; }
.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; }
.list li a:hover{ background:#333; color:#fff; }
.list li a.on{ background:#333; color:#fff; }
h1{ margin: 20px auto; text-align: center; }
</style>
</head>
<body>
<header class="header">
<div class="nav">
<ul class="list">
<li><a href="index.html">echoaiyaya</a>
<li><a href="dropDownMenu.html">下拉菜單</a></li>
<li><a href="cssChange.html">樣式改變</a></li>
<li><a href="jsChange.html">js改變</a></li>
<li><a href="flexible.html">彈性菜單</a></li>
<li><a href="css1Flexible1.html">純CSS下拉1</a></li>
<li><a href="css2Flexible2.html">純CSS下拉2</a></li>
<li><a href="css3Flexible3.html">純CSS下拉3</a></li>
<li><a href="css4Flexible4.html">js+css</a></li>
</ul>
</div>
</header>
<h1>首頁</h1>
<script src="./jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//當前鏈接以/分割後最後一個元素索引
var index = window.location.href.split("/").length-1;
//最後一個元素前四個字母,防止後面帶參數
var href = window.location.href.split("/")[index].substr(0,4);
if(href.length>0){
//如果匹配開頭成功則更改樣式
$(".list li a[href^='"+href+"']").addClass("on");
//[attribute^=value]：匹配給定的屬性是以某些值開始的元素。
}else {
//默認主頁高亮
$(".list li a[href^='index']").addClass("on");
}
});
</script>
</body>
</html>這段代碼得到的的樣式如圖：
前面的“樣式改變”和“js改變”都是實現導航滾動改變導航名字的功能。因爲主要想記錄的是下拉導航的實現，這裏就不寫出來了，有興趣的可以到下面地址下載源碼自己看看就好。
1.彈性菜單
實現思路：
（1）.先給html添加二級菜單。
（2）.編寫css樣式，改變二級菜單展示的位置和展示效果。
（3）.編寫js樣式，實現動態效果。
實現代碼：
第一步：給html添加二級菜單：
<header class="header">
<div class="nav">
<ul class="list">
<li><a href="index.html">echoaiyaya</a>
<li><a href="dropDownMenu.html">下拉菜單</a></li>
<li><a href="cssChange.html">樣式改變</a></li>
<li><a href="jsChange.html">js改變</a>
<div class="down">
<a href="#">1111</a>
<a href="#">1111</a>
<a href="#">1111</a>
<a href="#">1111</a>
<a href="#">1111</a>
</div>
</li>
<li><a href="flexible.html">彈性菜單</a>
<div class="down">
<a href="#">1111</a>
<a href="#">2222</a>
<a href="#">3333</a>
<a href="#">4444</a>
</div>
</li>
<li><a href="555">hello555</a></li>
</ul>
</div>
</header>.list .down{ position: absolute; top: 40px; background-color: #222; display: none; }
.list .down a{ color: #aaa; padding-left: 30px; display: block; }
.nav{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; position: relative;}第三步：添加js動態效果：
首先要先引入jquery和jquery的擴展包easing。
<script src="./jquery.min.js" type="text/javascript"></script>
<script src="./jquery.easing.min.js" type="text/javascript"></script>$(".list li").hover(function(){
$(this).find(".down").stop().slideDown({duration:500, easing:"easeOutBounce"});
},function(){
$(this).find(".down").stop().slideUp({duration:500, easing:"easeOutBounce"});
});
你看，宛若zz。當然，就算填了stop()解決了這個問題後，其實還是有些小bug。這裏就不演示了。
2.純css下拉方法一
實現思路：
這個實現思路就簡單多了，就是把二級菜單先隱藏起來，然後鼠標浮動到導航欄上面的時候再把二級菜單顯示出來。
實現代碼：
第一步：對html添加二級菜單，如同彈性菜單一樣，這裏不重複了。
第二步：對css樣式進行改寫。代碼如下：
.list .down{ position: absolute; top: 40px; background-color: #222; display: none; }
.list .down a{ color: #aaa; padding-left: 30px; display: block; }
.list li:hover .down{ display: block; }
3.純css下拉方法二
實現思路：
（1）.這裏的實現方法是將li標籤固定高度，溢出的部分隱藏掉。
（2）.然後當鼠標浮動到li標籤上的時候將隱藏樣式顯示出來。
實現代碼：
第一步：同樣先給一級菜單添加二級菜單。
第二步：編寫css代碼，代碼如下：
.list li{ float: left; overflow: hidden; position: relative;}
.list .down{ position: absolute; top: 40px; background-color: #222; }
.list .down a{ color: #aaa; padding-left: 30px; display: block; }
.list li:hover{ overflow: visible; }4.純css下拉三
前面兩種css實現下拉太過僵硬，沒有過渡效果。就怕領導給差評。所以這裏在做一個有過渡效果的。
實現思路：這裏我們用css的transition屬性來進行過渡操作，先把二級菜單大高度設置爲0，然後鼠標浮動上去的時候顯示高度，也就是顯示二級菜單。
實現代碼：
第一步：添加二級菜單標籤，設置position設置二級菜單的位置。
第二步：編寫css樣式設置高度，代碼如下：
.list .down{ position: absolute; top: 40px; background-color: #222; opacity: 0; height: 0; overflow: hidden; transition: all 1s ease;}
.list .down a{ padding-left: 30px; color: #aaa; display: block; }
.list li:hover .down{ opacity: 1; height: 400%;}事實上，在實際過程中，我們設置這個.down的高度我們不知道二級菜單有多少，界面騙騙領導好了，給後臺去寫，後臺估計會日狗了。固定高度的後果如下：
你看吧。這就直接留白了。如果二級菜單更多，就要溢出了。
5.js+css實現下拉
實現思路：其實就是在下拉方法3的基礎上添加js樣式，通過js來獲取二級菜單的高度來進行過渡效果的展現。
實現代碼：
第一步：添加二級菜單的html和設置position的樣式，和上面的一樣，這裏不重複說明了。
第二步：添加css樣式，代碼如下：
.list li a.on{ background:#333; color:#fff; }
.list .down{ position: absolute; top: 40px; background-color: #222; height: 0; overflow: hidden; transition: all 1s ease;}
.list .down a{ color: #aaa; padding-left: 30px; display: block; }第三步：通過js來獲取二級菜單的高度來設置，代碼如下：
$(".list li").hover(function(){
var num = $(this).find(".down a").size();
height = num * 100 + '%';
//alert(height);
$(this).find(".down").height(height);
},function(){
$(this).find(".down").height(0);
});效果獻上：
總結：
因爲公司沒了前端，只能後臺自己寫前端。所以博主正在努力學前端，歡迎大家來指出文章的錯誤。
源代碼百度雲：http://pan.baidu.com/s/1gfpFyjp