JQuery和CSS打造炫酷動感菜單

本教程將分步講解如何使用JQuery和CSS打造一個炫酷動感菜單。jQuery的"write less, do more"的特性可謂是家喻戶曉，即使沒有很豐富JS編程經驗的人，也可以通過其提供的API很快學會如何使用，當然，如果您經驗豐富，我還是建議您可以理解jQuery各主要函數的實現原理，其他不說了，直接看看如何用它來實現菜單神奇的效果吧

您可以點擊查看示範，也可以點擊下載原始碼。

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以達到隱藏的效果 */
      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樣式，這裡還提供了簡化版的樣式（查看示範）