如何使用javascript从数据库生成动态导航菜单

Question

我需要根据从数据库检索到的用户登录权限创建一个动态的嵌套导航菜单，我检索用户权限下拉菜单选项每个选项的userName;module;subModule;programe;programeLink;programeCode都用";“分隔。需要生成的模块文本作为主菜单，subModule文本作为subMenu1，程序作为subMenu2，程序链接中的"a href“为程序。下面是我尝试过的：

​

$(document).ready(function(){
$('head').append('<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" />');

function subModules1() {
    var subModules1Length = $('#userRights option').length;
    for (var i = 1 ; i <= subModules1Length; i++) {                             

$(".sub-menu-1").append("<ul><li class=\"hover-me\"><a href=\"#\">"+$("#userRights option:nth-child("+i+")").text()+"</a><i class=\"fa fa-angle-right\"></i></i></ul>") 

    }
  }

  $('#userName').change(function(){
    subModules1()
  });

  $(".forms").append("<div class=\"sub-menu-1\"></div>"); 

});

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.menu-bar {
    background: rgb(0, 100, 0);
    text-align: center;
}
.menu-bar ul {
    display: inline-flex;
    list-style: none;
    color: white;
}
.menu-bar ul li {
    width: 120px;
    margin: 15px;
    padding: 15px;
}
.menu-bar ul li a {
    text-decoration: none;
    color: white;
}
.menu-bar ul li:hover {
    background-color: #2bab0d;
    border-radius: 3px;
}
.menu-bar .fa {
    margin-right: 8px;
}
.sub-menu-1 {
    display: none;
}
.menu-bar ul li:hover .sub-menu-1 {
    display: block;
    position: absolute;
    background-color: rgb(0, 100, 0);
    margin-top: 15px;
    margin-left: 15px;
}
.menu-bar ul li:hover .sub-menu-1 ul {
    display: block;
    margin: 10px;
}
.menu-bar ul li:hover .sub-menu-1 ul li {
    width: 150px;
    padding: 10px;
    border-bottom: 1px dotted #ffffff;
    background: transparent;
    border-radius: 0;
    text-align: left;
}
.menu-bar ul li:hover .sub-menu-1 ul li:last-child {
    border: none;
}
.menu-bar ul li:hover .sub-menu-1 ul li a:hover {
    color: #b2ff00;
}
.fa-angle-right {
    float: right;
}
.sub-menu-2 {
    display: none;
}
.hover-me:hover .sub-menu-2 {
    position: absolute;
    display: block;
    margin-top: -45px;
    margin-left: 140px;
    background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-bar">
   <ul>
       <li class="forms"><a href="#">Forms</a></li>
       <li class="reports"><a href="#">Reports</a></li>
</ul>
</div>

<br>

<label for="User Name">User Name: </label>
  <input type="text" id="userName" name="userName"><br><br>
  
<label for="userRights">User Rights: </label>
<select id="userRights">
  <option value="userName;Forms;Time Attendance;Daily Attendance ;https://link1.com;001001001">userName;Forms;Time Attendance;Daily Attendance ;https://link1.com;001001001</option>
  <option value="userName;Forms;Time Attendance;Change Shift ;https://link2.com;001001002">userName;Forms;Time Attendance;Change Shift ;https://link2.com;001001002</option>
  <option value="userName;Reports;Project Control;Need Date;https://link3.com;002003006">userName;Reports;Project Control;Need Date;https://link3.com;002003006</option>
  <option value="userName;Reports;Project Control;Vacations;https://link4.com;002003005">userName;Reports;Project Control;Vacations;https://link4.com;002003005</option>
</select>

​

感谢您的帮助和建议。

Answer 1

你可以使用CSS插件来实现多级菜单

请参考下面的示例以了解

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/#