如下ajax获取的json菜单数据,如何利用layui渲染为左侧垂直菜单?
demo_menu.php
{
"code": 200,
"data": [
{
"title": "主页",
"icon": "layui-icon-home",
"list": [
{
"title": "主页",
"icon": "layui-icon-home",
"href": "home/home.html"
}
]
},
{
"title": "系统管理",
"icon": "layui-icon-senior",
"list": [
{
"title": "部门管理",
"href": "systemManage/branch.html"
},
{
"title": "用户管理",
"href": "systemManage/user.html",
"list":[
{
"title": "用户管理1",
"href": "systemManage/user1.html",
}
]
}
]
}
}
前台body
```html
<!doctype html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/xadmin.css">
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
</script>
</head>
<body>
<!-- top start -->
<div class="container">
<div class="left_open">
<a><i title="展开左侧栏" class="iconfont"></i></a>
</div>
<ul class="layui-nav right" lay-filter="">
<li class="layui-nav-item">
<a href="javascript:;"><?php echo $aa ?></a>
<dd>
<a onclick="xadmin.open('个人信息','./user',350,400)">个人信息</a></dd>
<dd class="close-all" data-type="closeall">
<a href="exit" onclick="return confirm('确定退出吗?');">退出</a></dd>
</dl>
</li>
</ul>
</div>
<!-- top end -->
<div class="left-nav">
<div id="side-nav">
<ul id="menu">
//如何将json菜单数据渲染在此处????
</ul>
</div>
</div>
<!-- right start -->
<div class="page-content">
<div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
<ul class="layui-tab-title">
<li class="home">
<i class="layui-icon"></i>主页</li></ul>
<div class="layui-unselect layui-form-select layui-form-selected" id="tab_right">
<dl>
<dd data-type="this">关闭当前</dd>
<dd data-type="other">关闭其它</dd>
<dd data-type="all">关闭全部</dd></dl>
</div>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<iframe src='./welcome.php' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
</div>
</div>
<div id="tab_show"></div>
</div>
</div>
<div class="page-content-bg"></div>
<style id="theme_style"></style>
<!-- right end -->
</body>
</html>
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/005803208796147.png "#left")