Top

侧边导航折叠效果

侧边导航折叠效果

源代码

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>侧边导航栏</title>
  6 <style type="text/css">
  7     .sliderbar { 
  8         width: 150px; 
  9         min-height: 150px; 
 10         margin: 10px;
 11         text-align: center;
 12         border: #cecece solid 1px;
 13     }
 14     .sliderbar ul, .sliderbar li { list-style-type: none; margin: 0; padding: 0;  }
 15     .sliderbar a {
 16         text-decoration: none; 
 17         font-family: "microsoft yahei"; 
 18          font-size: 14px; 
 19          color:#333 ; 
 20          display: inline-block; 
 21          height: 40px;
 22          line-height: 40px;
 23          width: 100%;
 24          border-bottom: 1px #cecece solid;
 25     }
 26 
 27     .sliderbar a:hover{ color: #fff; font-weight: 700; background-color: #11418A; }
 28     .sliderbar a.active { color: #fff; font-weight: 700; background-color: #11418A;  }
 29 
 30     .sliderbar .level2 { display: none; }
 31 
 32     .sliderbar .level2 a { text-indent: 25px; }
 33 </style>
 34 
 35 <script type="text/javascript" src="./js/jquery.js"></script>
 36 <script type="text/javascript">
 37     $(function(){
 38         $(".level1 > a").click(function(event){
 39             event.preventDefault();
 40             var $that = $(this);
 41             if (!$that.hasClass("active")) {  //展开
 42                 if(!$that.next().is(":animated")){
 43                     $that.addClass("active");
 44                     $that.parent().siblings().children("a").removeClass("active");
 45                     $that.parent().siblings().children("a").next().hide('slow');
 46                     $that.next().show('slow');
 47                 }
 48             }else{ //折叠
 49                 if(!$that.next().is(":animated")){
 50                     $that.removeClass("active");
 51                     $that.parent().siblings().children("a").removeClass("active");    
 52                     $that.next().stop().hide('slow');
 53                 }
 54             }
 55 
 56         });
 57 
 58         $(".sliderbar").on('click','a[target]', function(event){
 59             event.preventDefault();
 60             var $_that = $(this),$level2 = $_that.closest(".level2");
 61                 $level2.find("a").removeClass("active");
 62                 $_that.addClass("active");
 63         })
 64     })
 65 </script>
 66 </head>
 67 <body>
 68     <div class="sliderbar">
 69         <ul>
 70             <li class="level1">
 71                 <a href="#none" class="fold">家用电器</a>
 72                 <ul class="level2">
 73                     <li><a href="#none" class="active" target="s">生活电器</a></li>
 74                     <li><a href="#none" target="p">个户健康</a></li>
 75                     <li><a href="#none" target="c">厨房小店</a></li>
 76                     <li><a href="#none" target="w">五金家装</a></li>
 77                 </ul>
 78             </li>
 79             <li class="level1">
 80                  <a href="#none" class="fold">户外运动</a>
 81                  <ul class="level2">
 82                      <li><a href="#none" class="active" target="sh">健身运动</a></li>
 83                     <li><a href="#none" target="hu">户外装备</a></li>
 84                     <li><a href="#none" target="ti">体育用品</a></li>
 85                     <li><a href="#none" target="js">健身训练</a></li>
 86                  </ul>
 87             </li>
 88             <li class="level1">
 89                 <a href="#none"  class="fold">医药保健</a>
 90                 <ul class="level2">
 91                      <li><a href="#none" class="active" target="zx">中西药品</a></li>
 92                     <li><a href="#none" target="yy">营养健康</a></li>
 93                     <li><a href="#none" target="zy">营养药品</a></li>
 94                     <li><a href="#none" target="zb">滋补养生</a></li>
 95                 </ul>
 96             </li>
 97         </ul>
 98     </div>
 99 </body>
100 </html>

折叠展开效果

css样式

 1 /* reset */
 2 body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;}
 3 form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
 4 input,select{font-size:12px;line-height:16px;}
 5 img{border:0;}
 6 ul,li{list-style-type:none;}
 7 a {color:#00007F;text-decoration:none;}
 8 a:hover {color:#bd0a01;text-decoration:underline;}
 9 
10 .box {
11     width: 150px;
12     margin: 0 auto;
13 }
14 .menu{
15     overflow:hidden;
16     border-color: #C4D5DF;
17     border-style: solid;
18     border-width: 0 1px 1px;
19 }
20 /* lv1 */
21 .menu li.level1 a{
22     display: block;
23     height: 28px;
24     line-height: 28px;
25     background:#EBF3F8;
26     font-weight:700;
27     color: #5893B7;
28     text-indent: 14px;
29     border-top: 1px solid #C4D5DF;
30 }
31 .menu li.level1 a:hover{text-decoration:none;}
32 .menu li.level1 a.current{background:#B1D7EF;}
33 /* lv2 */
34 .menu li ul{overflow:hidden;}
35 .menu li ul.level2{display:none;}
36 .menu li ul.level2 li a{
37     display: block;
38     height: 28px;
39     line-height: 28px;
40     background:#ffffff;
41     font-weight:400;
42     color: #42556B;
43     text-indent: 18px;
44     border-top: 0px solid #ffffff;
45     overflow: hidden;
46 }
47 .menu li ul.level2 li a:hover{
48     color:#f60;
49 }

html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>导航栏</title>
 6 <link rel="stylesheet" href="css/default.css" type="text/css" />
 7 
 8 <!-- 引入 jQuery -->
 9 <script src="../../scripts/jquery.js" type="text/javascript"></script>
10 <script type="text/javascript">
11 //等待dom元素加载完毕.
12 $(document).ready(function(){
13     $(".level1 > a").click(function(){
14         $(this).addClass("current")   //给当前元素添加"current"样式
15         .next().show()                //下一个元素显示
16         .parent().siblings().children("a").removeClass("current")        //父元素的兄弟元素的子元素<a>移除"current"样式
17         .next().hide();                //它们的下一个元素隐藏
18         return false;
19     });
20 });
21 </script>
22 
23 </head>
24 <body>
25 <p>第三步：优化后：</p>
26 
27 <div class="box">
28     <ul class="menu">
29         <li class="level1">
30             <a href="#none">衬衫</a>
31             <ul class="level2">
32                 <li><a href="#none">短袖衬衫</a></li>
33                 <li><a href="#none">长袖衬衫</a></li>
34                 <li><a href="#none">短袖T恤</a></li>
35                 <li><a href="#none">长袖T恤</a></li>
36             </ul>
37         </li>
38         <li class="level1">
39             <a href="#none">卫衣</a>
40             <ul class="level2">
41                 <li><a href="#none">开襟卫衣</a></li>
42                 <li><a href="#none">套头卫衣</a></li>
43                 <li><a href="#none">运动卫衣</a></li>
44                 <li><a href="#none">童装卫衣</a></li>
45             </ul>
46         </li>
47         <li class="level1">
48             <a href="#none">裤子</a>
49             <ul class="level2">
50                 <li><a href="#none">短裤</a></li>
51                 <li><a href="#none">休闲裤</a></li>
52                 <li><a href="#none">牛仔裤</a></li>
53                 <li><a href="#none">免烫卡其裤</a></li>
54             </ul>
55         </li>
56     </ul>
57 </div>
58 
59 </body>
60 </html>

 

posted @ 2016-08-21 18:59  Avenstar  阅读(701)  评论(0)    收藏  举报