jQuery动态创建二级下拉菜单

创建网站的时候常常需要用到下拉菜单，每次都要自己写，总觉得太麻烦了，于是就写了一个动态生成下拉菜单的函数，并为其添加了相应的功能样式和视觉样式。在使用的时候，只需要定义好各级菜单的内容以及首级菜单的链接并调用dropMenu函数就可以使用了，如果需要，还可以自己添加一些富有特色的视觉样式。

1. 在HTML中添加如下代码：

1 <nav class="drop_menu">
2     <ul></ul>
3 </nav>

并引入相应的css和js文件：

1 <link rel="stylesheet" href="dropMenu.css">
2 <script type="text/javascript" src="script/jquery-3.0.0.min.js"></script>    
3 <script type="text/javascript" src="dropMenu.js"></script>

2. dropMenu.css中的内容

 1 /*添加视觉样式*/
 2 .drop_menu {
 3     font:1em helvetica, arial, sans-serif;
 4 }
 5 .drop_menu a {
 6     color:#555;
 7     background-color:#eee;
 8     padding:.2em 1em;
 9     border-width:3px;
10     border-color:transparent;
11 }
12 .drop_menu a:hover {
13     color:#fff;
14     background-color:#aaa;
15 }
16 .drop_menu a:active {
17     background:#fff;
18     color:#ccc;
19 }
20 .drop_menu li ul {width:9em;}
21 .drop_menu li li a {
22     border-right-style:none;
23     border-top-style:solid;
24 }
25 /*添加功能样式*/
26 .drop_menu * {
27     margin:0; padding:0;
28 }
29 .drop_menu ul {float:left;}
30 .drop_menu li {
31     float:left;
32     list-style-type:none;
33     position:relative;
34 }
35 .drop_menu li a {
36     display:block;
37     border-right-style:solid;
38     background-clip:padding-box;
39     text-decoration:none;
40 }
41 .drop_menu li:last-child a {border-right-style:none;}
42 .drop_menu li ul {
43     display:none;
44     position:absolute;
45     left:0;
46     top:100%;
47 }
48 .drop_menu li li {
49     float:none;
50 }
51 
52 .drop_menu li:hover > ul {
53     display:block;
54 }

3. dropMenu.js中的内容

 1 $(document).ready(function(){
 2     var menuText = [
 3         ["第一级1", "第二级11", "第二级12"],
 4         ["第一级2", "第二级21", "第二级22", "第二级23"],
 5         ["第一级3", "第二级31", "第二级32", "第二级33", "第二级34"],
 6         ["第一级4"]
 7     ];
 8     var topItemLinks = ["https://www.baidu.com/", "https://www.tmall.com/", "http://www.sina.com.cn/", "https://www.baidu.com/"];
 9     dropMenu(menuText, topItemLinks);
10 
11 //封装函数
12     function dropMenu(menuText, topItemLinks){
13         if(menuText.length != topItemLinks.length){
14             alert("警告：请保持首级菜单的数目与首级菜单链接的数目一致！");
15             return;
16         }
17         for (var i = 0; i < menuText.length; i++) {
18             var topItemLi = $("<li></li>");
19             topItemLi.appendTo($(".drop_menu>ul"));
20             $("<a></a>")
21                 .attr("href", topItemLinks[i])
22                 .html(menuText[i][0])
23                 .appendTo(topItemLi);
24             if(menuText[i].length > 1){
25                 var topItemUl = $("<ul></ul>");
26                 for(var j = 1; j < menuText[i].length; j++){
27                     topItemUl.appendTo(topItemLi);
28                     $("<li></li>")
29                         .appendTo(topItemUl)
30                         .append(
31                             $("<a href='###'></a>")
32                             .html(menuText[i][j])
33                         );
34                 }
35             }
36         }
37     }
38 });

4. 效果截图

 

转载于:https://www.cnblogs.com/shy-huiying/p/5662771.html