三级导航(jq版)

闲来无聊，有人要三级导航，就自己写了个简单的JQ版三级导航，JQ库自己下载，注意路径就行了

 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <style>
  7 *{margin:0;padding:0;}
  8 ul,dl,ol,li{ list-style:none;}
  9 h1,h2,h3,h4,h5,h6{ font-size:12px; font-weight:normal;}
 10 a{ text-decoration:none;}
 11 a:hover{ text-decoration:none;}
 12 
 13 .nav{ width:500px; height:30px; margin:10px auto; font-size:12px;}
 14 .nav li{ position:relative;}
 15 .nav h3{ cursor:pointer;}
 16 .navbox{ display:none; position:absolute;}
 17 .nav2{ width:100px; left:0; top:30px;}
 18 .nav3{ width:100px; left:100px; top:0;}
 19 
 20 .navlist1{ float:left;}
 21 .navlist1 a{display:inline-block; padding:0 20px; text-indent:10px; line-height:30px; background-color:#333; color:#ccc;}
 22 .navlist1 a:hover{background-color:#666; color:#fff;}
 23 .navlist2{}
 24 .navlist2 a{display:inline-block; width:100px; line-height:24px; padding:0; background-color:#666; color:#fff; text-indent:10px;}
 25 .navlist2 a:hover{background-color:#CCC; color:#333;}
 26 .navlist3{}
 27 .navlist3 a{display:inline-block; width:100px; padding:0; line-height:24px; background-color:#CCC; color:#333; text-indent:10px;}
 28 .navlist3 a:hover{background-color:#333; color:#ccc;}
 29 
 30 .nav .hover1{background-color:#666; color:#fff;}
 31 .nav .hover2{background-color:#CCC; color:#333;}
 32 .nav .hover3{background-color:#333; color:#ccc;}
 33 
 34 </style>
 35 <script type="text/javascript" language="javascript" src="js/jquery-1.6.4.js"></script>
 36 <script type="text/javascript" language="javascript">
 37 $(function(){
 38     $(".nav").find("li").mouseover(function(){
 39         if($(this).hasClass("navlist2")){
 40             $(this).find("a").eq(0).addClass("hover2");
 41         }else if($(this).hasClass("navlist1")){
 42             $(this).find("a").eq(0).addClass("hover1");
 43         }
 44         $(this).find(".navbox").eq(0).show();
 45     }).mouseout(function(){
 46         $(this).find(".navbox").eq(0).hide();
 47         $(this).find("a").eq(0).removeClass();
 48     })
 49 })
 50 </script>
 51 </head>
 52 
 53 <body>
 54     <ul class="nav nav1">
 55         <li class="navlist navlist1">
 56             <h3><a href="javascript:;">一</a></h3>
 57             <ul class="navbox nav2">
 58                 <li class="navlist navlist2">
 59                     <h3><a href="javascript:;">二</a></h3>
 60                     <ul class="navbox nav3">
 61                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 62                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 63                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 64                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 65                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 66                     </ul>
 67                 </li>
 68                 <li class="navlist navlist2">
 69                     <h3><a href="javascript:;">二</a></h3>
 70                     <ul class="navbox nav3">
 71                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 72                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 73                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 74                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 75                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 76                     </ul>
 77                 </li>
 78                 <li class="navlist navlist2">
 79                     <h3><a href="javascript:;">二</a></h3>
 80                     <ul class="navbox nav3">
 81                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 82                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 83                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 84                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 85                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 86                     </ul>
 87                 </li>
 88             </ul>
 89         </li>
 90         <li class="navlist navlist1">
 91             <h3><a href="javascript:;">一</a></h3>
 92             <ul class="navbox nav2">
 93                 <li class="navlist navlist2">
 94                     <h3><a href="javascript:;">二</a></h3>
 95                     <ul class="navbox nav3">
 96                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 97                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 98                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
 99                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
100                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
101                     </ul>
102                 </li>
103                 <li class="navlist navlist2">
104                     <h3><a href="javascript:;">二</a></h3>
105                     <ul class="navbox nav3">
106                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
107                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
108                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
109                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
110                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
111                     </ul>
112                 </li>
113                 <li class="navlist navlist2">
114                     <h3><a href="javascript:;">二</a></h3>
115                     <ul class="navbox nav3">
116                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
117                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
118                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
119                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
120                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
121                     </ul>
122                 </li>
123             </ul>
124         </li>
125         <li class="navlist navlist1">
126             <h3><a href="javascript:;">一</a></h3>
127             <ul class="navbox nav2">
128                 <li class="navlist navlist2">
129                     <h3><a href="javascript:;">二</a></h3>
130                     <ul class="navbox nav3">
131                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
132                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
133                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
134                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
135                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
136                     </ul>
137                 </li>
138                 <li class="navlist navlist2">
139                     <h3><a href="javascript:;">二</a></h3>
140                     <ul class="navbox nav3">
141                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
142                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
143                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
144                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
145                         <li class="navlist navlist3"><a href="javascript:;">三</a></li>
146                     </ul>
147                 </li>
148             </ul>
149         </li>
150         <li class="navlist navlist1">
151             <h3><a href="javascript:;">一</a></h3>
152             <ul class="navbox nav2">
153                 <li class="navlist navlist2">
154                     <h3><a href="javascript:;">二无后</a></h3>
155                 </li>
156                 <li class="navlist navlist2">
157                     <h3><a href="javascript:;">二无后</a></h3>
158                 </li>
159                 <li class="navlist navlist2">
160                     <h3><a href="javascript:;">二无后</a></h3>
161                 </li>
162                 <li class="navlist navlist2">
163                     <h3><a href="javascript:;">二无后</a></h3>
164                 </li>
165             </ul>
166         </li>
167         <li class="navlist navlist1">
168             <h3><a href="javascript:;">一无后</a></h3>
169         </li>
170     </ul>
171 </body>
172 </html>
posted @ 2012-06-26 11:09  胡淼  阅读(3099)  评论(0)    收藏  举报