热门关键字：
jquery > jquery教程 > jquery教程 > jQuery+CSS实现仿淘宝菜单滑动伸展收缩

jQuery+CSS实现仿淘宝菜单滑动伸展收缩

12612
作者：管理员
发布时间：2012/7/24 15:27:30
评论数：1
转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=16
这个效果是网友高崎刚做好就与大家分享的，功能很实用，代码非常的简单，废话不多说了先让大家看一下效果再说：
状态1效果如下：
状态2效果如下：
 
样式代码如下：
  1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td{   
  2.     margin:0;   
  3.     padding:0  
  4. }   
  5. span{   
  6.     color:#FF2B13  
  7. }   
  8. a{   
  9.     text-decoration:none;   
  10.     color:#515050  
  11. }   
  12. a:hover{   
  13.     text-decoration:underline;   
  14.     color:red  
  15. }   
  16. .box_all{   
  17.     overflow:hidden;   
  18.     width:350px;   
  19.     font-family:"微软雅黑";   
  20.     font-size:14px;   
  21.     border:1px solid #EEEEEE;   
  22.     border-top:2px solid #F57A04;   
  23.     padding:0 0 10px 0;   
  24.     margin:0 auto  
  25. }   
  26. .box{   
  27.     padding-left:45px;   
  28.     padding-top:5px  
  29. }   
  30. .box li{   
  31.     line-height:20px;   
  32.     margin-right:30px;   
  33.     width:120px;   
  34.     text-align:left;   
  35.     float:left;   
  36.     list-style-type:none  
  37. }   
  38. .boxdown{   
  39.     cursor:pointer;   
  40.     border:1px solid #EEEEEE;   
  41.     width:60px;   
  42.     height:14px;   
  43.     background:#FFFFFF url(../images/down.png) no-repeat 20px;   
  44.     margin-left:150px;   
  45.     margin-top:-2px;   
  46.     border-top:none;   
  47.     margin:0 auto  
  48. }   
  49. .up{   
  50.     cursor:pointer;   
  51.     border:1px solid #EEEEEE;   
  52.     width:60px;   
  53.     height:14px;   
  54.     background:#FFFFFF url(../images/up.png) no-repeat 20px;   
  55.     margin-left:150px;   
  56.     margin-top:-2px;   
  57.     border-top:none;   
  58.     margin:0 auto  
  59. }  
 
js主要代码如下：
  1. $(document).ready(function(){   
  2.     var a =$(".box ul li:gt(3):not(:last)");   
  3.         a.hide();   
  4.     $(".boxdown").click(function(){   
  5.         if(a.is(':visible')){   
  6.              a.slideUp('fast');   
  7.              $(this).removeClass('up');   
  8.         }else{   
  9.             a.slideDown('fast').show();    
  10.             $(this).addClass('up');   
  11.     }              
  12.     });   
  13. });  
 

打包下载





如果您觉得本文的内容对您的学习有所帮助：支付鼓励



关键字：jQuery+CSS实现仿淘宝菜单滑动伸展收缩
友荐云推荐