浏览者是否对网站感兴趣,前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); 
}); 
});