|
本教程將分步講解如何使用JQuery和CSS打造一個(gè)炫酷動(dòng)感菜單。jQuery的"write less, do more"的特性可謂是家喻戶(hù)曉，即使沒(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)菜單神奇的效果吧
您可以點(diǎn)擊查看演示，也可以點(diǎn)擊下載源代碼。
Step1 - HTML結(jié)構(gòu)
看一下菜單的HTML代碼，跟平常的菜單代碼沒(méi)有什么區(qū)別：
<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)代碼變成如下：
<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ì)出更炫酷的菜單，這里提供基本的樣式和解釋?zhuān)?/p>
/* 以下是菜單基本的樣式
*/.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)化版的樣式（查看演示）
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) jQuery打造動(dòng)態(tài)下滑菜單 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) jQuery打造動(dòng)態(tài)下滑菜單 [1]
第 2 頁(yè) 
