JQuery 寫的個性導航菜單

更新時間：2009年12月24日 01:48:46 作者：

瀏覽者是否對網站感興趣，前20秒的第一印象至關重要，所以我們的設計要符合大眾的期望。下面我們將設計一個個性的導航菜單。

（一）：XHTML：

<div id="sidebar"> 
<ul> 
<li><a href="index.html" class="normalMenu">Home</a></li> 
<li><a href="services.html" class="normalMenu">Services</a></li> 
<li><a href="faq.html" class="normalMenu">FAQ</a></li> 
<li><a href="testimonials.html" class="selectedMenu">Testimonials</a></li> 
<li><a href="about.html" class="normalMenu">About Alpacas</a></li> 
<li><a href="contact.html" class="normalMenu">Contact Us</a></li> 
</ul> 
</div> 

(二)：JQuery

復制代碼代碼如下:

 
$(document).ready(function(){ 
$('#navigationMenu li .normalMenu').each(function(){ 
// create a duplicate hyperlink and position it above the current one 
$(this).before($(this).clone().removeClass().addClass('hoverMenu')); 
}); 
$('#navigationMenu li').hover(function(){ 
// we assign an action on mouse over 
$(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200); 
// the animate method provides countless possibilities 
}, 
function(){ 
// and an action on mouse out 
$(this).find('.hoverMenu').stop().animate({marginTop:'-25px'},200); 
}); 
}); 

(三）CSS

復制代碼代碼如下:

 
/* Page styles */ 
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; 
} 
/* Navigation menu styles */ 
ul{ 
height:25px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
} 
ul li{ 
border:1px solid #444444; 
display:inline-block; 
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; 
} 