jQuery动态创建二级下拉菜单

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

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

<nav class="drop_menu">
    <ul></ul>
</nav>

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

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

2. dropMenu.css中的内容

/*添加视觉样式*/
.drop_menu {
    font:1em helvetica, arial, sans-serif;
}
.drop_menu a {
    color:#555;
    background-color:#eee;
    padding:.2em 1em;
    border-width:3px;
    border-color:transparent;
}
.drop_menu a:hover {
    color:#fff;
    background-color:#aaa;
}
.drop_menu a:active {
    background:#fff;
    color:#ccc;
}
.drop_menu li ul {width:9em;}
.drop_menu li li a {
    border-right-style:none;
    border-top-style:solid;
}
/*添加功能样式*/
.drop_menu * {
    margin:0; padding:0;
}
.drop_menu ul {float:left;}
.drop_menu li {
    float:left;
    list-style-type:none;
    position:relative;
}
.drop_menu li a {
    display:block;
    border-right-style:solid;
    background-clip:padding-box;
    text-decoration:none;
}
.drop_menu li:last-child a {border-right-style:none;}
.drop_menu li ul {
    display:none;
    position:absolute;
    left:0;
    top:100%;
}
.drop_menu li li {
    float:none;
}

.drop_menu li:hover > ul {
    display:block;
}

3. dropMenu.js中的内容

$(document).ready(function(){
    var menuText = [
        ["第一级1", "第二级11", "第二级12"],
        ["第一级2", "第二级21", "第二级22", "第二级23"],
        ["第一级3", "第二级31", "第二级32", "第二级33", "第二级34"],
        ["第一级4"]
    ];
    var topItemLinks = ["https://www.baidu.com/", "https://www.tmall.com/", "http://www.sina.com.cn/", "https://www.baidu.com/"];
    dropMenu(menuText, topItemLinks);

//封装函数
    function dropMenu(menuText, topItemLinks){
        if(menuText.length != topItemLinks.length){
            alert("警告：请保持首级菜单的数目与首级菜单链接的数目一致！");
            return;
        }
        for (var i = 0; i < menuText.length; i++) {
            var topItemLi = $("<li></li>");
            topItemLi.appendTo($(".drop_menu>ul"));
            $("<a></a>")
                .attr("href", topItemLinks[i])
                .html(menuText[i][0])
                .appendTo(topItemLi);
            if(menuText[i].length > 1){
                var topItemUl = $("<ul></ul>");
                for(var j = 1; j < menuText[i].length; j++){
                    topItemUl.appendTo(topItemLi);
                    $("<li></li>")
                        .appendTo(topItemUl)
                        .append(
                            $("<a href='###'></a>")
                            .html(menuText[i][j])
                        );
                }
            }
        }
    }
});

4. 效果截图