请选择 进入手机版 | 继续访问电脑版
jQuery制作简单两级导航栏案例教程(附代码)效果如下:

jQuery制作简单两级导航栏案例教程(附代码)

jQuery制作简单两级导航栏案例教程(附代码)

css样式,自定义即可
  1. <style>
  2.         ul.zidiu>li {
  3.             list-style: none;
  4.             width: 300px;
  5.             float: left;
  6.         }
  7.         
  8.         ul.zidiu li ul {
  9.             display: none;
  10.         }
  11.     </style>
复制代码


html代码

  1. <ul class="zidiu">
  2.         <li><a href="">关于我们</a>
  3.             <ul>
  4.                 <li><a href="">二级导航</a></li>
  5.                 <li>
  6.                     <a href=""></a>二级导航</li>
  7.                 <li>
  8.                     <a href=""></a>二级导航</li>
  9.             </ul>
  10.         </li>
  11.         <li><a href="">公司简介</a>
  12.             <ul>
  13.                 <li><a href="">二级导航</a></li>
  14.                 <li>
  15.                     <a href=""></a>二级导航</li>
  16.                 <li>
  17.                     <a href=""></a>二级导航</li>
  18.             </ul>
  19.         </li>
  20.         <li><a href="">产品中心</a>
  21.             <ul>
  22.                 <li><a href="">二级导航</a></li>
  23.                 <li>
  24.                     <a href=""></a>二级导航</li>
  25.                 <li>
  26.                     <a href=""></a>二级导航</li>
  27.             </ul>
  28.         </li>
  29.     </ul>
复制代码
js代码:
  1. <script>
  2.         $(function() {
  3.             $('ul.zidiu>li').mouseover(function() {
  4.                 $(this).children('ul').show();
  5.             });
  6.             $('ul.zidiu>li').mouseout(function() {
  7.                 $(this).children('ul').hide();
  8.             });
  9.         });
  10.     </script>
复制代码


推荐给好友: [复制链接]
推荐文章
回复

使用道具 举报

相关文章

发布主题
  • 今日更新:0 昨日更新:6
  • 会员总数:354 模板总数:8460
打造全国最大建站模板下载平台
手机/微信

13145201488

周一至周日9:00-23:00

如有侵权请联系我们

515138@qq.com 在线QQ咨询

微信扫码关注我们