自丢网

标题: jQuery制作简单两级导航栏案例教程（附代码） [打印本页]

---

作者: admin    时间: 2020-3-5 16:56
标题: jQuery制作简单两级导航栏案例教程（附代码）
jQuery制作简单两级导航栏案例教程（附代码）效果如下：
(, 下载次数: 387)

上传

点击文件名下载附件
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>

复制代码

---

欢迎光临 自丢网 (https://www.zidiu.com/)

Powered by Discuz! X3.5