custom.min.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 } .nav-md 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% } .nav-md 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 } ------------------------------------------------------------------------- home.js ------------------------------------------------------------------------- $(function() { $.ajax({ type: "get", url: '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 += "
"; html += "" + res[i].menuName + ""; html += "
"; html += " "; $("#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 = "" $("#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); } -------------------------------------------------------------------------------- data.json --------------------------------------------------------------------------------- { "data": [ { "menuId": "01", "menuName": "基础信息管理", "menuCode": "RR1234", "menuAction": "#", "children": [ { "menuId": "001", "menuName": "岗位管理", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "证书类型", "menuCode": "RR1234", "menuAction": "https://fanyi.baidu.com/?aldtype=16047#auto/zh" }, { "menuId": "001", "menuName": "岗位证书", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "考勤类型", "menuCode": "Yggdcd", "menuAction": "https://fanyi.baidu.com/?aldtype=16047#auto/zh" }, { "menuId": "001", "menuName": "技能等级", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" } ] }, { "menuId": "01", "menuName": "考勤管理", "menuCode": "RR1234", "menuAction": "#", "children": [ { "menuId": "001", "menuName": "考勤录入", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "考勤审批", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "考勤查看", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" } ] }, { "menuId": "01", "menuName": "证书管理", "menuCode": "RR1234", "menuAction": "#", "children": [ { "menuId": "001", "menuName": "人员证书", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "到期证书", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "缺失证书", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "证书统计", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" } ] }, { "menuId": "01", "menuName": "证书统计", "menuCode": "RR1234", "menuAction": "#", "children": [ { "menuId": "001", "menuName": "员工证书统计", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "单位各证书情况", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" } ] }, { "menuId": "01", "menuName": "系统管理", "menuCode": "RR1234", "menuAction": "#", "children": [ { "menuId": "001", "menuName": "机构管理", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "菜单管理", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "角色管理", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "用户管理", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "角色菜单", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "角色人员", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "人员管理", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" } ] },{ "menuId": "01", "menuName": "人员动态管理", "menuCode": "RR1234", "menuAction": "#", "children": [ { "menuId": "001", "menuName": "人员异动汇总", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "人员调整(发起)", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "人员调整(审批)", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" }, { "menuId": "001", "menuName": "人员技能", "menuCode": "RR1234", "menuAction": "#", "children": [ { "menuId": "001", "menuName": "岗位信息", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" },{ "menuId": "001", "menuName": "学历信息", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" },{ "menuId": "001", "menuName": "身份信息", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" },{ "menuId": "001", "menuName": "现场测评", "menuCode": "RR1234", "menuAction": "https://www.baidu.com/" } ] } ] } ] } ------------------------------------------------------------------------------------------------- index.html 左侧导航
-------------------------------------------------------------------------------------------------
