设为首页收藏本站
开启辅助访问 切换到宽版
快捷导航 发布信息
搜索
搜索附件  
自丢网 › 附件中心 › 建站程序/IT教程 › JavaScript教程 › jquery教程.jpg

板块导航

热门下载

左侧广告
版权所有：自丢网
For 2020-2050 © zidiu.com

jquery教程.jpg

 

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>
复制代码