導航選單比較實用,當然還是選經典的,代碼最少的,效果最好的嘍,各位童鞋請圍觀哦,廢話不說, 效果圖如下,歡迎評價: 看程式碼: 複製程式碼 程式碼如下: 一款帶動畫效果的經典二級導航選單Jquery特效 <BR>html, body, ul, li, h1, h2, h3, h4, h5, h6, fieldset, legend {padding:0; margin:0;} <BR>body {font:12px/normal Verdana, Arial, Helvetica, sans-serif ;} <BR>ul,li {list-style-type:none; text-transform:capitalize;} <BR>clear{clear:both;height:0;font-size: 1px;line-height: 0px;} //清除浮動<BR>/*menu*/ <BR>#nav {margin:0 auto 60px; width:1080px; display:block;} <BR>mainlevel {background:#ffe60c; float:left; border-left; border right:1px solid #fff; width:140px;} <BR>mainlevel a {color:#000; text-decoration:none; line-height:32px; display:block; padding:0 20px; width:100p; weight:bold;} <BR>mainlevel a:hover {color:#fff; text-decoration:none; background:#062723 0 0; font-weight:bold;} <BR>mainlevel ul {display:none; position: absolute;} <BR>mainlevel li {border-top:1px solid #fff; background:#ffe60c; width:140px;font-weight:bold;} <BR> <BR>$(function(){ <BR>$('li.mainlevel').hover(function(){ <BR>$(this).find('ul').slideDown(500);//滑鼠滑過找到目前的UL,向下滑出顯示子選單<BR>},function(){ <BR>$(this).find('ul').stop(true,false).slideUp("fast"); <BR>}); <BR> }); <BR> Jquery插件 JavaScript jQuery slideUp slideDown up and down animate Jquery资源 JavaScript jQuery slideUp slideDown up and down animate Jquery特效 JavaScript jQuery slideUp slideDown up and down animate Jquery学堂 JavaScript jQuery slideUp slideDown up and down animate 分享快乐 JavaScript jQuery slideUp slideDown up and down animate 身體>