首页 > 代码库 > 二级菜单jquery
二级菜单jquery
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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。