[組圖]使用jQuery與CSS搭建下拉式導航菜單 | 銳博

07-26

研究表明，導航欄吸引了大多數瀏覽者的注意力。在存在下拉菜單的導航欄中，具有良好的組織及直觀的印象是最關鍵的，優美的設計在開發中也至關重要。在本教程中，我會告訴您如來來創建一個緩慢下沉的漂亮的下拉菜單：

第一步：HTML文檔

首先為你的導航創建一個無序列表，然後簡單的寫一下另外一個無序列表作為導航子菜單。

<ul class=「topnav」>

<li><a href=「#」>Home</a></li>

<li>

<a href=「#」>Tutorials</a>

<ul class=「subnav」>

<li><a href=「#」>Sub Nav Link</a></li>

<li><a href=「#」>Sub Nav Link</a></li>

</ul>

</li>

<li>

<a href=「#」>Resources</a>

<ul class=「subnav」>

<li><a href=「#」>Sub Nav Link</a></li>

<li><a href=「#」>Sub Nav Link</a></li>

</ul>

</li>

<li><a href=「#」>About Us</a></li>

<li><a href=「#」>Advertise</a></li>

<li><a href=「#」>Submit</a></li>

<li><a href=「#」>Contact Us</a></li>

</ul>

第二步：用CSS定義導航樣式

ul.topnav {

list-style: none;

padding: 0 20px;

margin: 0;

float: left;

width: 920px;

background: #222;

font-size: 1.2em;

background: url(topnav_bg.gif) repeat-x;

}

ul.topnav li {

float: left;

margin: 0;

padding: 0 15px 0 0;

position: relative; /*–Declare X and Y axis base for sub navigation–*/

}

ul.topnav li a{

padding: 10px 5px;

color: #fff;

display: block;

text-decoration: none;

float: left;

}

ul.topnav li a:hover{

background: url(topnav_hover.gif) no-repeat center top;

}

ul.topnav li span { /*–Drop down trigger styles–*/

width: 17px;

height: 35px;

float: left;

background: url(subnav_btn.gif) no-repeat center top;

}

ul.topnav li span.subhover {background-position: center bottombottom; cursor: pointer;} /*–Hover effect for trigger–*/

ul.topnav li ul.subnav {

list-style: none;

position: absolute; /*–Important - Keeps subnav from affecting main navigation flow–*/

left: 0; top: 35px;

background: #333;

margin: 0; padding: 0;

display: none;

float: left;

width: 170px;

border: 1px solid #111;

}

ul.topnav li ul.subnav li{

margin: 0; padding: 0;

border-top: 1px solid #252525; /*–Create bevel effect–*/

border-bottom: 1px solid #444; /*–Create bevel effect–*/

clear: both;

width: 170px;

}

html ul.topnav li ul.subnav li a {

float: left;

width: 145px;

background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;

padding-left: 20px;

}

html ul.topnav li ul.subnav li a:hover { /*–Hover effect for subnav links–*/

background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;

}

第三步：添加jQuery代碼

如果您是jQuery新手，那麼請先閱讀這裡的教程，下面包含注釋的腳本會告訴您jQuery是如何來表現的。

$(document).ready(function(){

$(「ul.subnav」).parent().append(「<span></span>」); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

$(「ul.topnav li span」).click(function() { //When trigger is clicked…

//Following events are applied to the subnav itself (moving subnav up and down)

$(this).parent().find(「ul.subnav」).slideDown(『fast』).show(); //Drop down the subnav on click

$(this).parent().hover(function() {

}, function(){

$(this).parent().find(「ul.subnav」).slideUp(』slow』); //When the mouse hovers out of the subnav, move it back up

});

//Following events are applied to the trigger (Hover events for the trigger)

}).hover(function() {

$(this).addClass(「subhover」); //On hover over, add class 「subhover」

}, function(){ //On Hover Out

$(this).removeClass(「subhover」); //On hover out, remove class 「subhover」

});

});

作為友好提示，下拉菜單圖標只有在支持javascript的的情況下才會顯示並觸發。

這是在不支持javascript的情況下的顯示。

點擊這裡查看Demo及下載源文件。

注意：在之前，我有增加了圓角的演示版本 (CSS3 - 僅僅在 Firefox, Safar 及 Chrome 獲得支持)。如果您想要嘗試下，那麼請查看這裡的教程。

嘗試並自定義適合您需要的菜單！如果您有任何問題，憂慮，建議或評論，那麼請不要猶豫，告訴我您所知道的吧！