A Stylish Navigation Menu With jQuery 執行畫面

正如你可能知道，一個新的訪問者與網站互動的第一個20秒的確定它們是否要留下或者離開。這意味著你必須遵循共同的設計手法，把網頁做成使用者喜歡的樣式。這個是一個簡單又時尚的 CSS + XHTML 的導航選單 基於 jQuery 框架完成。

使用方法：
首先載入程式所需要的 JavaScript 程式碼
//使用 Google AJAX API 取得 jQuery 1.7.2 的 min 版本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

接下來設計導航選單的元素
<div id="menu-container">
<ul id="navigationMenu">
<li><a href="#" class="normalMenu">Home</a></li>
<li><a href="#" class="normalMenu">Services</a></li>
<li><a href="#" class="selectedMenu">Our clients</a></li>
<li><a href="#" class="normalMenu">The team</a></li>
<li><a href="#" class="normalMenu">About us</a></li>
<li><a href="#" class="normalMenu">Contact us</a></li>
</ul>
</div>


然後再設計表當的 CSS 樣式

body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{ /* 重置瀏覽器的相容性元素 */
margin:0px;
padding:0px;
}
body{ /* 本範例的文字設定 */
margin-top:20px;
font-family:Arial, Helvetica, sans-serif;
color:#51555C;
height:100%;
font-size:12px;
}
/* 接下來才是導航選單的樣式內容 */
ul{
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
ul li{
border:1px solid #444444;
display:inline-block; /* 改變LI的排列方式 */
float:left; /*列表的方向 */
height:25px;
list-style-type:none; /* 取消顯示列表標籤 */
overflow:hidden; /* 超出部分隱藏 */
}
ul li a, ul li a:hover,
ul li a:visited{
text-decoration:none; /* 連結取消下底線 */
}
.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
outline:none;
padding:5px 10px;
display:block;
}
.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
margin-top:-25px;
background:url(img/grey_bg.gif) repeat-x #eeeeee;
color:#444444;
}
.selectedMenu,.selectedMenu:visited {
margin:0;
}
.normalMenu, .normalMenu:visited{
color:white;
background:url(img/dark_bg.gif) repeat-x #444444;
}

最後加上 JavaScript
$(function(){
// 頁面加載完成後執行
$('#navigationMenu li .normalMenu').each(function(){ //走訪選單的列表
//建立一個重複的超連結.讓滑過部分也能有連結
$(this).before($(this).clone().removeClass().addClass('hoverMenu'));
});
$('#navigationMenu li').hover(function(){ // 滑鼠滑過動作
$(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200);
//設定一個補間動畫
},
function(){
//當滑鼠離開後建立一個回復的補間動畫
$(this).find('.hoverMenu').stop().animate({marginTop:'-25px'},200);
});
});

作者網站：http://tutorialzine.com/2009/09/stylish-navigation-menu-jquery/