动态创建html菜单栏,layui动态生成导航栏

Head部分

引入css样式表:

引入js库:

Html部分

Js部分：数据模拟和数据请求

//左侧竖导航：模拟数据

layui.config({

base: 'static/js/',　　//需要依赖的navbar.js/tab.js路径

}).use(['element', 'layer', 'navbar', 'tab'], function () {

var element = layui.element,

$ = layui.jquery,

layer = layui.layer,

navbar = layui.navbar();

//模拟数据navs

navs = [

{

"title": "首页",

"icon": "fa fa-home", //左侧图标

"spread": false,　　//是否默认展开

"href": "${pageContext.request.contextPath}/static/modules/main/index.jsp" //点击之后，右侧iframe显示的页面路径

},

{

"title": "营业厅",

"icon": "fa fa-desktop ",

"spread": false,

"href": " ",

"children": [　　//二级菜单 children

{

"title": "指标",

"icon": "fa fa-flag-checkered",

"href": "${pageContext.request.contextPath}/stati