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. 效果截圖