导航菜单比较实用,当然还是选择经典的,代码最少的,效果最好的喽,各位童鞋请围观哦,废话不说, 效果图如下,欢迎评价: 看代码: 复制代码 代码如下: 一款带动画效果的经典二级导航菜单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-right:1px solid #fff; width:140px;} <BR>mainlevel a {color:#000; text-decoration:none; line-height:32px; display:block; padding:0 20px; width:100px; font-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