【前端积累】简单的导航 

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>导航栏</title>
  6     <!--
  7     list-style-type 设置或检索对象的列表项所使用的预设标记none:不适用项目符号
  8     text-decoration 属性规定添加到文本的修饰。none表示无修饰 underline下划线等
  9     line-height:检索或设置对象的行高，即字体最低端与字体内部顶端之间的距离
 10     overflow:检索或这只对象处理溢出内容的方式 visible:溢出不做处理 hidden:隐藏且不出现滚动条 scroll:隐藏溢出且以滚动条的形式显示 auto:有溢出时出现滚动条  无溢出时不出现
 11     text-indent:设置或检索对象中的文本的缩进
 12     border-style：设置边框样式
 13     border-width:设置或检索对象的边框宽度
 14     font-weight:设置或检索对象的文本字体的粗细
 15 
 16     -->
 17     <style type="text/css">
 18         body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;}
 19         form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
 20         input,select{font-size:12px;line-height:16px;}
 21         img{border:0;}
 22         ul,li{list-style-type:none;}
 23         a {color:#00007F;text-decoration:none;}
 24         a:hover {color:#bd0a01;text-decoration:underline;}
 25 
 26         .box {
 27             width: 150px;
 28             margin: 0 auto;
 29         }
 30         .menu{
 31             overflow:hidden;
 32             border-color: #C4D5DF;
 33             border-style: solid;
 34             border-width: 0 1px 1px;
 35         }
 36         /* lv1 */
 37         .menu li.level1 a{
 38             display: block;
 39             height: 28px;
 40             line-height: 28px;
 41             background:#EBF3F8;
 42             font-weight:700;
 43             color: #5893B7;
 44             text-indent: 14px;
 45             border-top: 1px solid #C4D5DF;
 46         }
 47         .menu li.level1 a:hover{text-decoration:none;}
 48         .menu li.level1 a.current{background:#B1D7EF;}
 49         /* lv2 */
 50         .menu li ul{overflow:hidden;}
 51         .menu li ul.level2{display:none;}
 52         .menu li ul.level2 li a{
 53             display: block;
 54             height: 28px;
 55             line-height: 28px;
 56             background:#ffffff;
 57             font-weight:400;
 58             color: #42556B;
 59             text-indent: 18px;
 60             border-top: 0px solid #ffffff;
 61             overflow: hidden;
 62         }
 63         .menu li ul.level2 li a:hover{
 64             color:#f60;
 65         }
 66     </style>
 67     <script src="../jquery/jquery-3.1.1.js" type="text/javascript"></script>
 68     <!--
 69     .next()方法允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素
 70     parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素
 71     .siblings([selector]):获得匹配元素集合中每个元素的兄弟元素
 72     .children([selector]):获得匹配元素集合中每个元素的子元素，选择器选择性筛选
 73 
 74     -->
 75     <script type="text/javascript">
 76         $(document).ready(function () {
 77         $(".level1 > a").click(function(){
 78             $(this).addClass("current")//为当前元素添加current样式
 79                     .next().show()//下一个元素显示
 80                     .parent().siblings().children('a').removeClass("current")//父元素的同辈元素的子元素a移除current样式
 81                     .next().hide();//下一个元素隐藏
 82             return false;
 83         });
 84         });
 85     </script>
 86 </head>
 87 <body>
 88 <div class="box">
 89     <ul class="menu">
 90         <li class="level1">
 91             <a href="#none">衬衫</a>
 92             <ul class="level2">
 93                 <li><a href="#none">短袖衬衫</a> </li>
 94                 <li><a href="#none">长袖衬衫</a> </li>
 95                 <li><a href="#none">短袖T靴</a> </li>
 96                 <li><a href="#none">长袖T靴</a> </li>
 97             </ul>
 98         </li>
 99         <li class="level1">
100             <a href="#none">卫衣</a>
101             <ul class="level2">
102                 <li><a href="#none">开襟卫衣</a> </li>
103                 <li><a href="#none">套头卫衣</a> </li>
104                 <li><a href="#none">运动卫衣</a> </li>
105                 <li><a href="#none">童装卫衣</a> </li>
106             </ul>
107         </li>
108         <li class="level1">
109             <a href="#none">裤子</a>
110             <ul class="level2">
111                 <li><a href="#none">短裤</a> </li>
112                 <li><a href="#none">休闲裤</a> </li>
113                 <li><a href="#none">牛仔裤</a> </li>
114                 <li><a href="#none">免烫卡其裤</a> </li>
115             </ul>
116         </li>
117     </ul>
118 </div>
119 </body>
120 </html>

 

posted @ 2016-11-01 11:05  霓裳梦竹  阅读(296)  评论(0)    收藏  举报