快捷導(dǎo)航

jQuery 打造動(dòng)態(tài)下滑菜單實(shí)現(xiàn)說(shuō)明

更新時(shí)間：2010年04月15日 22:03:38 作者：

本教程將分步講解如何使用JQuery和CSS打造一個(gè)炫酷動(dòng)感菜單。

jQuery的"write less, do more"的特性可謂是家喻戶曉，即使沒(méi)有很豐富JS編程經(jīng)驗(yàn)的人，也可以通過(guò)其提供的API很快學(xué)會(huì)如何使用，當(dāng)然，如果您經(jīng)驗(yàn)豐富，我還是建議您可以理解jQuery各主要函數(shù)的實(shí)現(xiàn)原理，其他不說(shuō)了，直接看看如何用它來(lái)實(shí)現(xiàn)菜單神奇的效果吧。

Step1 - HTML結(jié)構(gòu)
　　看一下菜單的HTML代碼，跟平常的菜單代碼沒(méi)有什么區(qū)別：

復(fù)制代碼代碼如下:

 
<div id="menu" class="menu"> 
<ul> 
<li><a href="javascript:;">Home</a></li> 
<li><a href="javascript:;">HTML/CSS</a></li> 
<li><a href="javascript:;">JavaScript</a></li> 
<li><a href="javascript:;">Resources</a></li> 
<li><a href="javascript:;">Tutorials</a></li> 
<li><a href="javascript:;">About</a></li> 
</ul> 
</div> 

　　關(guān)鍵在于利用腳本在每個(gè)錨點(diǎn)(a元素)中建立幾個(gè)分隔層，這樣就可以在鼠標(biāo)懸停時(shí)分別控制它們產(chǎn)生動(dòng)畫(huà)。為此，我們要在DOM加載完成時(shí)候修改DOM的結(jié)構(gòu)，使得每個(gè)錨點(diǎn)代碼變成如下：

復(fù)制代碼代碼如下:

 
<a href="javascript:;"> 
<span class="out">Home</span> 
<span class="bg"></span> 
<span class="over">Home</span> 
</a> 

　　原先的每個(gè)錨點(diǎn)中的內(nèi)容會(huì)被附加到兩個(gè)span元素（.out和.over）里面，另外一個(gè)span元素（.bg）為背景圖片層。
　　至于如何修改DOM結(jié)構(gòu)，JS代碼將在Step3中講解。
Step2 - CSS樣式
　　在示例中，展示了兩種樣式，有使用背景圖的和沒(méi)有使用背景圖的（具體查看演示），您也可以自由定制自己的樣式，以設(shè)計(jì)出更炫酷的菜單，這里提供基本的樣式和解釋：

復(fù)制代碼代碼如下:

 
/* 以下是菜單基本的樣式 */ 
.menu ul li { 
float: left; 
/* 菜單子元素的內(nèi)容超出不可見(jiàn) */ 
overflow: hidden; 
/* 以下省略部分代碼 */ 
} 
.menu ul li a { 
/* 必須是相對(duì)定位 */ 
position: relative; 
display: block; 
width: 110px; 
/* 以下省略部分代碼 */ 
} 
.menu ul li a span { 
/* 所有層將使用絕對(duì)定位 */ 
position: absolute; 
left: 0; 
width: 110px; 
} 
.menu ul li a span.out { 
top: 0px; 
} 
.menu ul li a span.over, 
.menu ul li a span.bg { 
/* 起初.over層和.bg層相對(duì)a元素-45px以達(dá)到隱藏的效果 */ 
top: -45px; 
} 
/* 以下是使用背景圖的示例 */ 
#menu { 
　　/* 菜單背景 */ 
background:url(bg_menu.gif) scroll 0 -1px repeat-x; 
border:1px solid #CCC; 
} 
#menu ul li a { 
color: #000; 
} 
#menu ul li a span.over { 
color: #FFF; 
} 
#menu ul li span.bg { 
　　/* 指定高度和背景圖 */ 
height: 45px; 
background: url(bg_over.gif) center center no-repeat; 
} 

　　您也可以在自行定制CSS樣式，這里還提供了簡(jiǎn)化版的樣式（查看演示）
Step3 - JavaScript代碼
　　首先要做的是，實(shí)現(xiàn)Step1中所說(shuō)的，在DOM加載完成后修改其DOM結(jié)構(gòu)，具體做法如下：

復(fù)制代碼代碼如下:

 
// 把每個(gè)a中的內(nèi)容包含到一個(gè)層（span.out）中， 
// 然后再在span.out層后面追加背景圖層（span.bg） 
$("#menu li a").wrapInner( '<span class="out"></span>' ) 
　　　　　　　　　.append( '<span class="bg"></span>' ); 
// 循環(huán)為菜單的a每個(gè)添加一個(gè)層（span.over） 
$("#menu li a").each(function() { 
　　$( '<span class="over">' + $(this).text() + '</span>' ) 
　　　　　　　　　.appendTo( this ); 
}); 

在講動(dòng)畫(huà)代碼之前，先看一下動(dòng)畫(huà)的過(guò)程，如下圖所示：

在Step1中我們知道DOM加載后，a元素中建立了幾個(gè)分隔層，在Step2中，CSS樣式中，我們?cè)O(shè)置了span.bg和span.over層的top屬性為-45px，因?yàn)閟pan元素已設(shè)置為絕對(duì)定位，它將相對(duì)于li a 元素向上-45px，因?yàn)閘i元素內(nèi)容超出不可見(jiàn)，所以開(kāi)始時(shí)，.bg層和.over層位于空間范圍外。

　　我們要設(shè)置的動(dòng)畫(huà)過(guò)程是，當(dāng)鼠標(biāo)懸停時(shí)，三個(gè)層同時(shí)向下移動(dòng)，span.out層向下移動(dòng)至移除可見(jiàn)范圍，span.over和span.bg移動(dòng)進(jìn)入可見(jiàn)區(qū)域，設(shè)置span.bg速度比span.over速度稍快，錯(cuò)位產(chǎn)生更加效果。

　　要實(shí)現(xiàn)這樣動(dòng)畫(huà)效果，使用jQuery的.animate()方法很容易就可以實(shí)現(xiàn)，以下是JS代碼和解釋：

復(fù)制代碼代碼如下:

 
$("#menu li a").hover(function() { 
　　// 鼠標(biāo)懸停時(shí)候被觸發(fā)的函數(shù) 
$(".out",this).stop().animate({'top':'45px'},250);//下滑至隱藏 
$(".over",this).stop().animate({'top':'0px'},250); //下滑至顯示 
$(".bg",this).stop().animate({'top':'0px'},120); //下滑至顯示 
}, function() { 
// 鼠標(biāo)移出時(shí)候被觸發(fā)的函數(shù) 
$(".out",this).stop().animate({'top':'0px'},250); //上滑至顯示 
$(".over",this).stop().animate({'top':'-45px'},250);//上滑至隱藏 
$(".bg",this).stop().animate({'top':'-45px'},120);//上滑至隱藏 
}); 

總結(jié)
　　以上講解了如何一步步打造jQuery動(dòng)態(tài)下滑菜單，您可以按部就班自己實(shí)現(xiàn)一個(gè)，也可以下載源代碼修改定制，當(dāng)然，您有什么好的提議或者有什么問(wèn)題，都可以給我留言。

　查看最終效果

　jOuery 動(dòng)態(tài)下滑菜單打包下載

PS：本文由維奇總結(jié)

您可能感興趣的文章: