后台管理系统侧导航--时间轴样式
程序员文章站
2022-03-18 16:54:44
效果图 index.html index
效果图
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>
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%; }
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.baidu.com/' 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); }
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/" } ] } ] } ] }
由于使用了ajax,所以记得要在服务器端运行
上一篇: Mac安装PHP运行环境
下一篇: 统计字符出现的次数并去重