jquery 二级菜单滑动实现
页面
1 <div class="navbox"> 2 <div class="nav"> 3 <ul class="clearfix"> 4 <li><a class="selected" target="_blank" href="http://www.17sucai.com/"><span>网站首页</span></a></li> 5 <li class="drop-menu-effect"> 6 <a target="_blank" href="http://www.17sucai.com/"><span>jquery代码</span></a> 7 <ul class="submenu"> 8 <li><a href="http://www.17sucai.com/">jquery图片特效</a></li> 9 <li><a href="http://www.17sucai.com/">jquery导航菜单</a></li> 10 <li><a href="http://www.17sucai.com/">jquery选项卡特效</a></li> 11 <li><a href="http://www.17sucai.com/">jquery文字特效</a></li> 12 </ul> 13 </li> 14 <li class="drop-menu-effect"> 15 <a target="_blank" href="http://www.17sucai.com/"><span>jquery图片特效</span></a> 16 <ul class="submenu"> 17 <li><a href="http://www.17sucai.com/">jquery图片切换</a></li> 18 <li><a href="http://www.17sucai.com/">jquery幻灯片</a></li> 19 <li><a href="http://www.17sucai.com/">jquery图片滚动</a></li> 20 <li><a href="http://www.17sucai.com/">jquery图片放大镜</a></li> 21 <li><a href="http://www.17sucai.com/">jquery广告</a></li> 22 <li><a href="http://www.17sucai.com/">jquery更多特效</a></li> 23 </ul> 24 </li> 25 <li class="drop-menu-effect"> 26 <a target="_blank" href="http://www.17sucai.com/"><span>jquery导航菜单</span></a> 27 <ul class="submenu"> 28 <li><a href="http://www.17sucai.com/">jquery动画菜单</a></li> 29 <li><a href="http://www.17sucai.com/">jquery树形菜单</a></li> 30 <li><a href="http://www.17sucai.com/">jquery下拉菜单</a></li> 31 <li><a href="http://www.17sucai.com/">jquery右键菜单</a></li> 32 <li><a href="http://www.17sucai.com/">jquery更多特效</a></li> 33 </ul> 34 </li> 35 <li class="drop-menu-effect"> 36 <a target="_blank" href="http://www.17sucai.com/"><span>jquery选项卡特效</span></a> 37 <ul class="submenu"> 38 <li><a href="http://www.17sucai.com/">jquery选项卡切换</a></li> 39 <li><a href="http://www.17sucai.com/">jquery滑动选项卡</a></li> 40 <li><a href="http://www.17sucai.com/">jquery更多特效</a></li> 41 </ul> 42 </li> 43 <li class="drop-menu-effect"> 44 <a target="_blank" href="http://www.17sucai.com/"><span>jquery文字特效</span></a> 45 <ul class="submenu"> 46 <li><a href="http://www.17sucai.com/">jquery文字滚动</a></li> 47 <li><a href="http://www.17sucai.com/">jquery文字闪烁</a></li> 48 <li><a href="http://www.17sucai.com/">jquery文字切换</a></li> 49 <li><a href="http://www.17sucai.com/">jquery文字数量</a></li> 50 <li><a href="http://www.17sucai.com/">jquery文字改变</a></li> 51 <li><a href="http://www.17sucai.com/">jquery更多特效</a></li> 52 </ul> 53 </li> 54 </ul> 55 </div> 56 </div>
1 *{margin:0;padding:0;list-style-type:none;} 2 a,img{border:0;} 3 a,a:visited{color:#5e5e5e; text-decoration:none;} 4 a:hover{color:#333;text-decoration:underline;} 5 body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;} 6 /* navbox */ 7 .navbox,.nav li,.nav li.current a,.nav li.selected a span,.nav li a.selected,.nav li a.selected span{background:url(images/headerbg.png) no-repeat;} 8 .navbox{height:39px;background-position:0 -138px;background-repeat:repeat-x;position:relative;z-index:9;} 9 .nav{width:960px;margin:0 auto;} 10 .nav li{float:left;height:39px;background-position:100% -99px;padding:0 3px 0 2px;position:relative;} 11 .nav li.last{background:none;} 12 .nav li a{float:left;display:block;padding:0 0 0 4px;height:39px;overflow:hidden;} 13 .nav li a span{float:left;display:block;padding:0 4px 0 0;line-height:39px;font-size:14px;color:#fff;font-weight:800;cursor:pointer;width:142px;text-align:center;} 14 .nav li.selected a,.nav li a.selected{background-position:0 -60px;text-decoration:none;} 15 .nav li.selected a span,.nav li a.selected span{background-position:100% -60px;color:#ff7e00;} 16 .nav li.selected .submenu{display:block;} 17 .nav li .submenu{display:none;position:absolute;top:39px;left:6px;} 18 .nav li .submenu{border-style:solid;border-width:0px 1px 1px 1px;border-color:#ddd;padding:0 5px 5px 5px;width:132px;background:#fff;} 19 .nav li .submenu{-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-moz-box-shadow:0 5px 5px #D3D3D3;-webkit-box-shadow:0 5px 5px #D3D3D3;box-shadow:0 5px 5px #D3D3D3;} 20 .nav li .submenu li{float:none;padding:0;background:none;height:auto;border-bottom:dotted 1px #BEBEBE;} 21 .nav li .submenu li.last{border:none;} 22 .nav li .submenu li a{float:none;padding:0;text-align:center;height:28px;line-height:28px;background:none;} 23 .nav li .submenu li a:hover{background:#ddd;font-weight:800;}
1 function dropMenu(obj){ 2 $(obj).each(function(){ 3 var theSpan = $(this); 4 var theMenu = theSpan.find(".submenu"); 5 var tarHeight = theMenu.height(); 6 theMenu.css({height:0,opacity:0}); 7 theSpan.hover( 8 function(){ 9 $(this).addClass("selected"); 10 theMenu.stop().show().animate({height:tarHeight,opacity:1},400); 11 }, 12 function(){ 13 $(this).removeClass("selected"); 14 theMenu.stop().animate({height:0,opacity:0},400,function(){ 15 $(this).css({display:"none"}); 16 }); 17 } 18 ); 19 }); 20 } 21 22 $(document).ready(function(){ 23 24 dropMenu(".drop-menu-effect"); 25 26 });
