最终效果图如下:
HTML代码(index.html):
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>index</title>
- <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
- <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
- <link rel="stylesheet" href="css/style.css">
- </head>
- <body>
- <!-- 左侧导航 -->
- <div class="contentLeft">
- <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
- <ul class="nav side-menu" id="navmenu"></ul>
- </div>
- </div>
- <!-- 右侧内容 -->
- <div class="contentRight">
- <div class="right_col" role="main" id="rightContent"></div>
- </div>
- <script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script>
- <script src='https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js'></script>
- <script src='js/script.js'></script>
- </body>
- </html>
CSS样式代码(style.css):
- a,
- a:focus,
- a:hover {
- text-decoration: none
- }
- .main_menu .fa {
- -webkit-font-smoothing: antialiased;
- width: 24px;
- opacity: .99;
- display: inline-block;
- font-family: FontAwesome;
- font-style: normal;
- font-weight: 400;
- font-size: 18px;
- }
- .main_menu span.fa {
- float: right;
- text-align: center;
- margin-top: 5px;
- font-size: 10px;
- min-width: inherit;
- color: #C4CFDA
- }
- .active a span.fa {
- text-align: right!important;
- margin-right: 4px
- }
- .nav.side-menu>li {
- position: relative;
- display: block;
- cursor: pointer
- }
- .nav.side-menu>li>a {
- margin-bottom: 6px
- }
- .nav.side-menu>li>a:hover {
- color: #F2F5F7!important
- }
- .nav.side-menu>li>a:hover,
- .nav>li>a:focus {
- text-decoration: none;
- background: 0 0
- }
- .nav.child_menu {
- display: none
- }
- .nav.child_menu li.active,
- .nav.child_menu li:hover {
- background-color: rgba(255, 255, 255, .06)
- }
- .nav.child_menu li {
- padding-left: 36px
- }
- ul.nav.child_menu li:before {
- background: #425668;
- bottom: auto;
- content: "";
- height: 8px;
- left: 23px;
- margin-top: 15px;
- position: absolute;
- right: auto;
- width: 8px;
- z-index: 1;
- border-radius: 50%
- }
- ul.nav.child_menu li:after {
- border-left: 1px solid #425668;
- bottom: 0;
- content: "";
- left: 27px;
- position: absolute;
- top: 0
- }
- .nav>li>a {
- position: relative;
- display: block
- }
- .nav.child_menu>li>a,
- .nav.side-menu>li>a {
- color: #E7E7E7;
- font-weight: 500
- }
- .nav li li.current-page a,
- .nav.child_menu li li a.active,
- .nav.child_menu li li a:hover {
- color: #fff
- }
- .nav.child_menu li li.active,
- .nav.child_menu li li:hover {
- background: 0 0
- }
- .nav>li>a {
- padding: 13px 15px 12px
- }
- .nav.side-menu>li.active,
- .nav.side-menu>li.current-page {
- border-right: 5px solid #1ABB9C
- }
- .nav li.current-page {
- background: rgba(255, 255, 255, .05)
- }
- .nav li li li.current-page {
- background: 0 0
- }
- .nav.side-menu>li.active>a {
- text-shadow: rgba(0, 0, 0, .25) 0 -1px 0;
- background: linear-gradient(#334556, #2C4257), #2A3F54;
- box-shadow: rgba(0, 0, 0, .25) 0 1px 0, inset rgba(255, 255, 255, .16) 0 1px 0
- }
- .nav>li>a:focus,
- .nav>li>a:hover {
- background-color: transparent
- }
- *{
- padding: 0;margin: 0;
- }
- body,html{
- width: 100%;
- height: 100%;
- }
- .contentLeft {
- float: left;
- width: 15%;
- height: 100%;
- background:black;
- opacity: 0.7;
- }
- .contentRight {
- float: left;
- width: 85%;
- }
JS代码(script.js):
- $(function() {
- $.ajax({
- type: "get",
- url: '/demo/json/data.json',
- dataType: "json",
- success: function(result) {
- var res = eval(result.data);
- showSideMenu(res);
- }
- });
- $("#navmenu").on("click", ".liname",
- function(index) {
- var index = $("#navmenu .liname").index(this);
- $("#navmenu>li>.child_menu").eq(index).slideToggle();
- $("#navmenu>li>.child_menu").eq(index).parent().siblings("li").find(".child_menu").slideUp();
- });
- });
- function showSideMenu(res) {
- for (var i = 0; i < res.length; i++) {
- var html = "";
- html += "<li>";
- html += "<a class='liname'><i class='fa fa-home'></i>" + res[i].menuName + "<span class='fa fa-chevron-down'></span></a>";
- html += "<ul class='nav child_menu'>";
- for (var k = 0; k < res[i].children.length; k++) {
- if (typeof(res[i].children[k].children) != 'undefined') {
- html += "<li class='three_menu'>";
- html += "<a href='" + res[i].children[k].menuAction + "'>" + res[i].children[k].menuName + "</a>";
- html += "<ul class='nav child_menu'>";
- for (var j = 0; j < res[i].children[k].children.length; j++) {
- html += "<li>";
- html += "<a href='" + res[i].children[k].children[j].menuAction + "' target='myFrame' >" + res[i].children[k].children[j].menuName + "</a>";
- html += "</li>";
- }
- html += "</ul>";
- html += "</li>";
- } else if (typeof(res[i].children[k].children) == 'undefined') {
- html += "<li>";
- html += "<a href='" + res[i].children[k].menuAction + "' target='myFrame'>" + res[i].children[k].menuName + "</a>";
- html += "</li>";
- }
- }
- html += "</ul>";
- html += "</li>";
- $("#navmenu").append(html);
- };
- $("#navmenu .child_menu").eq(0).css({
- "display": "block"
- });
- $("#navmenu .child_menu").eq(0).find("li:eq(0)").addClass("current-page");
- var fram = "<iframe src='https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg' name='myFrame' id='myIframe' width='100%' height='100%' scrolling='auto' frameborder='0'></iframe>";
- $("#rightContent").append(fram);
- $("#navmenu .child_menu").on("click", "li",
- function() {
- var index = $("#navmenu .child_menu li").index(this);
- $("#navmenu .child_menu li").eq(index).parent().parent().siblings("li").find(".child_menu").slideUp();
- $("#navmenu .child_menu li").eq(index).parent().parent().siblings("li").find(".child_menu").find("li").removeClass("current-page");
- $("#navmenu .child_menu li").eq(index).addClass("current-page");
- $("#navmenu .child_menu li").eq(index).siblings().removeClass("current-page");
- });
- $("#navmenu").on("click", ".three_menu",
- function() {
- var index = $("#navmenu .three_menu").index(this);
- $("#navmenu .three_menu .child_menu").eq(index).slideDown();
- });
- $("#navmenu .three_menu").on("click", "li",
- function() {
- var index = $("#navmenu .three_menu li").index(this);
- $("#navmenu .three_menu li a").eq(index).css({
- "color": "beige"
- });
- $("#navmenu .three_menu li a").eq(index).parent().siblings("li").find("a").css({
- "color": "white"
- });
- });
- var str = window.screen.availHeight - 170;
- $("#rightContent").css({
- "min-height": str
- });
- var bdHeight = document.documentElement.clientHeight;
- $("#rightContent").height(bdHeight - 65);
- }
JSON代码(data.json):
- {
- "data": [
- {
- "menuId": "01",
- "menuName": "基础信息管理",
- "menuCode": "RR1234",
- "menuAction": "#",
- "children": [
- {
- "menuId": "001",
- "menuName": "岗位管理",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "证书类型",
- "menuCode": "RR1234",
- "menuAction": "https://fanyi.baidu.com/?aldtype=16047#auto/zh"
- }, {
- "menuId": "001",
- "menuName": "岗位证书",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "考勤类型",
- "menuCode": "Yggdcd",
- "menuAction": "https://fanyi.baidu.com/?aldtype=16047#auto/zh"
- }, {
- "menuId": "001",
- "menuName": "技能等级",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }
- ]
- }, {
- "menuId": "01",
- "menuName": "考勤管理",
- "menuCode": "RR1234",
- "menuAction": "#",
- "children": [
- {
- "menuId": "001",
- "menuName": "考勤录入",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "考勤审批",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "考勤查看",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }
- ]
- }, {
- "menuId": "01",
- "menuName": "证书管理",
- "menuCode": "RR1234",
- "menuAction": "#",
- "children": [
- {
- "menuId": "001",
- "menuName": "人员证书",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "到期证书",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "缺失证书",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "证书统计",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }
- ]
- }, {
- "menuId": "01",
- "menuName": "证书统计",
- "menuCode": "RR1234",
- "menuAction": "#",
- "children": [
- {
- "menuId": "001",
- "menuName": "员工证书统计",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "单位各证书情况",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }
- ]
- }, {
- "menuId": "01",
- "menuName": "系统管理",
- "menuCode": "RR1234",
- "menuAction": "#",
- "children": [
- {
- "menuId": "001",
- "menuName": "机构管理",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "菜单管理",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "角色管理",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "用户管理",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "角色菜单",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "角色人员",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "人员管理",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }
- ]
- },{
- "menuId": "01",
- "menuName": "人员动态管理",
- "menuCode": "RR1234",
- "menuAction": "#",
- "children": [
- {
- "menuId": "001",
- "menuName": "人员异动汇总",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "人员调整(发起)",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "人员调整(审批)",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }, {
- "menuId": "001",
- "menuName": "人员技能",
- "menuCode": "RR1234",
- "menuAction": "#",
- "children": [
- {
- "menuId": "001",
- "menuName": "岗位信息",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- },{
- "menuId": "001",
- "menuName": "学历信息",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- },{
- "menuId": "001",
- "menuName": "身份信息",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- },{
- "menuId": "001",
- "menuName": "现场测评",
- "menuCode": "RR1234",
- "menuAction": "https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg"
- }
- ]
- }
- ]
- }
- ]
- }
由于使用了ajax,所以记得要在服务器端运行。
收藏