本教學將逐步說明如何使用JQuery和CSS打造一個酷炫動感選單。 jQuery的"write less, do more"的特性可謂是家喻戶曉，即使沒有很豐富JS程式設計經驗的人，也可以透過其提供的API很快學會如何使用，當然，如果您經驗豐富，我還是建議您可以理解jQuery各主要函數的實作原理，其他不說了，直接看看如何用它來實現選單神奇的效果吧
.jpg)
Step1 - HTML結構
看一下選單的HTML程式碼，跟平常的選單程式碼沒有什麼差別：
<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>
關鍵在於利用腳本在每個錨點(a元素)中建立幾個分隔層，這樣就可以在滑鼠懸停時分別控制它們產生動畫。為此，我們要在DOM載入完成時候修改DOM的結構，讓每個錨點程式碼變成如下：
<a href="javascript:;">
<span class="out">Home</span>
<span class="bg"></span>
<span class="over">Home</span>
</a>
原先的每個錨點中的內容會被附加到兩個span元素（.out和.over）裡面，另外一個span元素（.bg）為背景圖片圖層。
至於如何修改DOM結構，JS程式碼將在Step3中講解。
Step2 - CSS樣式
在範例中，展示了兩種樣式，有使用背景圖的和沒有使用背景圖的（具體查看演示），您也可以自由定制自己的樣式，以設計出更酷炫的菜單，這裡提供基本的樣式和解釋：
/* 以下是菜單基本的樣式
*/.menu ul li {
float: left;
/* 選單子元素的內容超出不可見*/
overflow: hidden;
/* 以下省略部分程式碼*/
}
.menu ul li a {
/* 必須是相對定位 */
position: relative;
display: block;
width: 110px;
/* 以下省略部分程式碼*/
}
.menu ul li a span {
/* 所有層將使用絕對定位*/
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層相對a元素-45px以達到隱藏的效果*/
頂: -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樣式，這裡也提供了簡化版的樣式（檢視示範）