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

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

導(dǎo)航菜單在網(wǎng)頁中呈現(xiàn)的頻率還是比較多的，因為效果相當不錯,接下來為大家介紹下使用jquery實現(xiàn)經(jīng)典二級導(dǎo)航菜單，各位童鞋們快來圍觀哦

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

看代碼：

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

 
<!DOCTYPE html > 
<html> 
<head> 
<title>一款帶動畫效果的經(jīng)典二級導(dǎo)航菜單Jquery特效</title> 
<meta name="author" content="Jquery" /> 
<meta name="keywords" content="Jquery,Jquery資源,前端設(shè)計,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;}//清除浮動哦 
/*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);//鼠標滑過找到當前的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> 