欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

后台管理系统侧导航--时间轴样式

程序员文章站 2022-06-22 11:56:27
效果图 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，所以记得要在服务器端运行

 

上一篇： iOS开发可以用到的mac命令

下一篇： 后台管理系统常用侧导航，可折叠，三级导航

推荐阅读