先上最终效果图：
点击左侧的菜单树可以显示在导航栏中
下面是具体步骤：
①下载layui
②项目结构介绍
html：存放静态界面
img：存放图片
json：模拟请求数据，展示用
layui：步骤一下载的文件
③源码
index.html
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>后台管理系统</title><link rel="stylesheet" href="../layui/css/layui.css" rel="external nofollow"><link rel="stylesheet" href="//at.alicdn.com/t/font_2696345_ubdu47c0yba.css"><script src="../layui/layui.js"></script></head><body><div class="layui-layout-admin"><!--头部--><div class="layui-header"><div class="layui-logo">后台管理系统</div><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href=""><img src="../img/1.jpg" class="layui-nav-img">admin</a><dl class="layui-nav-child"><dd><a href="">基本资料</a></dd><dd><a href="">安全设置</a></dd></dl></li></ul></div>//统一处理图标和文字之间的距离<style>.iconset {margin-right: 5px;}</style><!--左侧--><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;"><li class="layui-nav-item layui-nav-itemed"><a href="javascript:;"><i class="layui-icon layui-icon-set iconset"></i>系统管理</a><dl class="layui-nav-child"><dd><a href="javascript:; data-type=" toAdd" class="subMenu" data-id="1" data-title="用户管理" data-url="userList.html"><i class="iconfonticon-yonghu iconset"></i>用户管理</a></dd><dd><a href="javascript:;" data-type="toAdd" class="subMenu" data-id="2" data-title="系统配置管理" data-url=""><i class="iconfonticon-ziyuan iconset"></i>系统配置管理</a></dd></dl></li><li class="layui-nav-item layui-nav-itemed"><a href="javascript:;"><i class="iconfonticon-choujiang iconset"></i>抽奖管理</a><dl class="layui-nav-child"><dd><a href="javascript:;" data-type="toAdd" class="subMenu" data-id="3" data-title="奖品管理" data-url=""><i class="iconfonticon-jiangpin iconset"></i>奖品管理</a></dd><dd><a href="javascript:;" data-type="toAdd" class="subMenu" data-id="4" data-title="中奖查询" data-url=""><i class="iconfonticon-jilu iconset"></i>中奖查询</a></dd></dl></li></ul></div></div><image></image><!--中间主体--><div class="layui-body" id="container"><div class="layui-tab" lay-filter="tabs" lay-allowClose="true"><ul class="layui-tab-title"></ul><div class="layui-tab-content"></div></div></div><!--底部--><div class="layui-footer"><center>XXX版权所有</center></div></div><script>layui.use(['element'], function() {var element = layui.element;// var layer = layui.layer;var $ = layui.$;// 配置tab实践在下面无法获取到菜单元素$('.subMenu').on('click', function() {var dataid = $(this);//这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目if ($(".layui-tab-title li[lay-id]").length <= 0) {//如果比零小，则直接打开新的tab项active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));} else {//否则判断该tab项是否以及存在var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有$.each($(".layui-tab-title li[lay-id]"), function() {//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开if ($(this).attr("lay-id") == dataid.attr("data-id")) {isData = true;}})if (isData == false) {//标志为false 新增一个tab项active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));}}//最后不管是否新增tab，最后都转到要打开的选项页面上active.tabChange(dataid.attr("data-id"));});var active = {//在这里给active绑定几项事件，后面可通过active调用这些事件tabAdd: function(url, id, name) {//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分//tabs:中间主体的fiter名element.tabAdd('tabs', {title: name,content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url +'" style="width:100%;height:99%;"></iframe>',id: id //规定好的id})FrameWH(); //计算ifram层的大小},tabChange: function(id) {//切换到指定Tab项element.tabChange('tabs', id); //根据传入的id传入到指定的tab项},tabDelete: function(id) {element.tabDelete("tabs", id); //删除}};function FrameWH() {var h = $(window).height();$("iframe").css("height", h + "px");}});</script></body></html>userList.html
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用户列表</title><link rel="stylesheet" href="../layui/css/layui.css" rel="external nofollow"><script src="../layui/layui.js"></script></head><body style="padding-left: 10px;padding-right: 10px;"><div class="searchTable">用户名：<div class="layui-inline"><input class="layui-input" name="userName" id="userName" autocomplete="off"></div>手机号：<div class="layui-inline"><input class="layui-input" name="phoneNo" id="phoneNo" autocomplete="off"></div><button id="searchBtn" class="layui-btn" data-type="reload">搜索</button></div><table class="layui-hide" id="test"></table><script>layui.use('table', function() {var table = layui.table;table.render({elem: '#test',url: '../json/user.json',toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局//,curr: 5 //设定初始在第 5 页,groups: 1 //只显示 1 个连续页码,limit: 10, //默认的第一个每页记录数limits : [50,100,150], //记录数的选择范围first: false //不显示首页,last: false //不显示尾页},cols: [[{type: 'checkbox',fixed:'left'}, {field: 'id',align:'center',title: 'ID',sort: true}, {field: 'username',align:'center',title: '用户名'}, {field:'phone',align:'center',title:'手机号'},{field: 'sex',align:'center',title: '性别',sort: true}, {field: 'city',align:'center',title: '城市'},{fixed: 'right',title: '操作',toolbar: '#barDemo'}]]});var $ = layui.$, active = {reload: function(){//查询条件组装var queryWhere = {}; //搜索框自定义的idvar companyName$_ = $('#companyName');if(companyName$_.val()!=''){ queryWhere['companyName'] = companyName$_.val();}//执行重载table.reload('test', {page: {curr: 1 //重新从第 1 页开始},where: queryWhere,done: function(res, curr, count){this.where= queryWhere;}}, 'data');}};$('.searchTable .layui-btn').on('click', function(){var type = $(this).data('type');active[type] ? active[type].call(this) : '';});//头部工具栏table.on('toolbar(test)', function(obj) {// debugger;//var checkStatus = table.checkStatus(obj.config.id);switch (obj.event) {case 'add':{var addIndex = layer.open({type: 2,area: ['700px', '450px'],fixed: false, //不固定maxmin: true,content: url, //url自定义});layer.full(addIndex);}break;};});//监听操作工具条table.on('tool(test)', function(obj){var data = obj.data; if(obj.event === 'edit'){var updateIndex = layer.open({type: 2,area: ['700px', '450px'],fixed: false, //不固定maxmin: true,content: url, //url自定义});layer.full(updateIndex);}});});</script><!-- 操作栏的两个内容，id要和toolbar的一样 --><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></script><!-- 头部工具栏按钮 --><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="add">新增</button><button class="layui-btn layui-btn-sm" lay-event="del">删除</button></div></script></body></html>user.json
{"code": 0,"msg": "success","count": 14,"data": [{"id": 1,"username": "zs","phone":"182****3110","sex": "男","city": "台州"},{"id": 2,"username": "ls","phone":"182****3110","sex": "女","city": "台州"},{"id": 3,"username": "zs","phone":"182****3110","sex": "男","city": "台州"},{"id": 4,"username": "ls","phone":"182****3110","sex": "女","city": "台州"},{"id": 5,"username": "zs","phone":"182****3110","sex": "男","city": "台州"},{"id": 6,"username": "ls","phone":"182****3110","sex": "女","city": "台州"},{"id": 7,"username": "zs","phone":"182****3110","sex": "男","city": "台州"},{"id": 8,"username": "ls","phone":"182****3110","sex": "女","city": "台州"},{"id": 9,"username": "zs","phone":"182****3110","sex": "男","city": "台州"},{"id": 19,"username": "ls","phone":"182****3110","sex": "女","city": "台州"},{"id": 11,"username": "zs","phone":"182****3110","sex": "男","city": "台州"},{"id": 12,"username": "ls","phone":"182****3110","sex": "女","city": "台州"},{"id": 13,"username": "zs","phone":"182****3110","sex": "男","city": "台州"},{"id": 14,"username": "ls","phone":"182****3110","sex": "女","city": "台州"}]}更多使用技巧（radio的选择、下拉框回写、自定义数据展示模板等）查看：
④图标获取
通过这个地址：iconfont-阿里巴巴矢量图标库
官方QQ群：
开源地址：
在线留言：