Jquery實(shí)現(xiàn)帶動(dòng)畫效果的經(jīng)典二級(jí)導(dǎo)航菜單

更新時(shí)間：2013年03月22日 17:06:47 作者：

導(dǎo)航菜單在網(wǎng)頁(yè)中呈現(xiàn)的頻率還是比較多的，因?yàn)樾Ч喈?dāng)不錯(cuò),接下來(lái)為大家介紹下使用jquery實(shí)現(xiàn)經(jīng)典二級(jí)導(dǎo)航菜單，各位童鞋們快來(lái)圍觀哦

導(dǎo)航菜單比較實(shí)用，當(dāng)然還是選擇經(jīng)典的，代碼最少的，效果最好的嘍，各位童鞋請(qǐng)圍觀哦，廢話不說，
效果圖如下，歡迎評(píng)價(jià)：

看代碼：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html > 
<html> 
<head> 
<title>一款帶動(dòng)畫效果的經(jīng)典二級(jí)導(dǎo)航菜單Jquery特效</title> 
<meta name="author" content="Jquery" /> 
<meta name="keywords" content="Jquery,Jquery資源,前端設(shè)計(jì),div+css" /> 
<style> 
html, body, ul, li, h1, h2, h3, h4, h5, h6, fieldset, legend {padding:0; margin:0;} 
body {font:12px/normal Verdana, Arial, Helvetica, sans-serif;} 
ul,li {list-style-type:none; text-transform:capitalize;} 
clear{clear:both;height:0;font-size: 1px;line-height: 0px;}//清除浮動(dòng)哦 
/*menu*/ 
#nav {margin:0 auto 60px; width:1080px; display:block;} 
mainlevel {background:#ffe60c; float:left; border-right:1px solid #fff; width:140px;} 
mainlevel a {color:#000; text-decoration:none; line-height:32px; display:block; padding:0 20px; width:100px; font-weight:bold;} 
mainlevel a:hover {color:#fff; text-decoration:none; background:#062723 0 0; font-weight:bold;} 
mainlevel ul {display:none; position:absolute;} 
mainlevel li {border-top:1px solid #fff; background:#ffe60c; width:140px;font-weight:bold;} 
</style> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript" > 
$(function(){ 
$('li.mainlevel').hover(function(){ 
$(this).find('ul').slideDown(500);//鼠標(biāo)滑過找到當(dāng)前的UL，向下滑出顯示子菜單 
},function(){ 
$(this).find('ul').stop(true,false).slideUp("fast"); 
}); 
}); 
</script> 
</head> 
<body> 
<ul id="nav"> 
<li class="mainlevel"><a  target="_blank">Jquery插件</a> 
<ul > 
<li><a  target="_blank">JavaScript</a></li> 
<li><a  target="_blank">jQuery</a></li> 
<li><a  target="_blank">slideUp</a></li> 
<li><a  target="_blank">slideDown</a></li> 
<li><a  target="_blank">up and down</a></li> 
<li><a  target="_blank">animate</a></li> 
</ul> 
</li> 
<li class="mainlevel"><a  target="_blank">Jquery資源</a> 
<ul> 
<li><a  target="_blank">JavaScript</a></li> 
<li><a  target="_blank">jQuery</a></li> 
<li><a  target="_blank">slideUp</a></li> 
<li><a  target="_blank">slideDown</a></li> 
<li><a  target="_blank">up and down</a></li> 
<li><a  target="_blank">animate</a></li> 
</ul> 
</li> 
<li class="mainlevel"><a  target="_blank">Jquery特效</a> 
<ul id="sub_03"> 
<li><a  target="_blank">JavaScript</a></li> 
<li><a  target="_blank">jQuery</a></li> 
<li><a  target="_blank">slideUp</a></li> 
<li><a  target="_blank">slideDown</a></li> 
<li><a  target="_blank">up and down</a></li> 
<li><a  target="_blank">animate</a></li> 
</ul> 
</li> 
<li class="mainlevel" ><a  target="_blank">Jquery學(xué)堂</a> 
<ul > 
<li><a  target="_blank">JavaScript</a></li> 
<li><a  target="_blank">jQuery</a></li> 
<li><a  target="_blank">slideUp</a></li> 
<li><a  target="_blank">slideDown</a></li> 
<li><a  target="_blank">up and down</a></li> 
<li><a  target="_blank">animate</a></li> 
</ul> 
</li> 
<li class="mainlevel" ><a  target="_blank">分享快樂</a> 
<ul > 
<li><a  target="_blank">JavaScript</a></li> 
<li><a  target="_blank">jQuery</a></li> 
<li><a  target="_blank">slideUp</a></li> 
<li><a  target="_blank">slideDown</a></li> 
<li><a  target="_blank">up and down</a></li> 
<li><a  target="_blank">animate</a></li> 
</ul> 
</li> 
<div class="clear"></div> 
</ul> 
</body> 
</html> 