码迷,mamicode.com
首页 > Web开发 > 详细

二级菜单jquery

时间:2015-01-16 16:07:31      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title><Document></title>
 6 </head>
 7 <style type="text/css">
 8 ul,li,body{margin:0;padding: 0;}
 9 #nav{width: 500px;margin: 10px auto;}
10     ul li{list-style: none;}
11     .clear{clear: both;}
12     #nav>li{float: left;position: relative;}
13     li a{display: block;width: 100px;height: 30px;line-height: 30px;text-align:center;background-color: #ccc;text-decoration: none;color: #333;}
14     li a:hover{background: #c66;color: #fff;}
15     li ul{height: 0px;overflow: hidden;position: absolute;top:30px;}
16 </style>
17 <body>
18     <ul id="nav">
19         <li>
20             <a href="#">一级菜单</a>
21             <ul class="subNav">
22                 <li><a href="#">二级菜单</a></li>
23                 <li><a href="#">二级菜单</a></li>
24                 <li><a href="#">二级菜单</a></li>
25                 <li><a href="#">二级菜单</a></li>
26             </ul>
27         </li>
28         <li>
29             <a href="#">一级菜单</a>
30             <ul class="subNav">
31                 <li><a href="#">二级菜单</a></li>
32                 <li><a href="#">二级菜单</a></li>
33                 <li><a href="#">二级菜单</a></li>
34                 <li><a href="#">二级菜单</a></li>
35             </ul>
36         </li>
37         <li><a href="#">一级菜单</a></li>
38         <li><a href="#">一级菜单</a></li>
39         <li><a href="#">一级菜单</a></li>
40         <div class="clear"></div>
41     </ul>
42     <script src="jquery.min.js"></script>
43     <script type="text/javascript">
44      $(#nav>li).hover(
45          function(){
46              $(this).find("ul").animate({height:"150px"}, 200)
47          },
48          function(){
49              $(this).find("ul").animate({height:0}, 200)
50          }
51          )
52     </script>
53 </body>
54 </html>

同样的效果用jquery实现会简单的多。代码如上

二级菜单jquery

标签:

原文地址:http://www.cnblogs.com/MissBean/p/4228633.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!