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

效果图

index.html

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>index</link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css"="css/style.css">

body<!-- 左侧导航 -->
div class="contentLeft"id="sidebar-menu" class="main_menu_side hidden-print main_menu">
        ul ="nav side-menu" id="navmenu"></uldiv 右侧内容 ="contentRight"="right_col" role="main"="rightContent"script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'script='https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js'='js/script.js'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; 10px;
  min-width: inherit;
  color: #C4CFDA
}

.active a span.fa { right!important;
  margin-right: 4px
}

.nav.side-menu>li {
  position: relative; block;
  cursor: pointer
}

.nav.side-menu>li>a {
  margin-bottom: 6px
}

.nav.side-menu>li>a:hover { #F2F5F7!important
}

.nav.side-menu>li>a:hover,.nav>li>a:focus { none;
  background: 0 0
}

.nav.child_menu {

.nav.child_menu li.active,.nav.child_menu li:hover {
  background-color: rgba(255,.06)
}

.nav.child_menu li {
  padding-left: 36px
}

ul.nav.child_menu li:before { #425668;
  bottom: auto;
  content: "";
  height: 8px;
  left: 23px; 15px; absolute;
  right:
  z-index: 1;
  border-radius: 50%
}

ul.nav.child_menu li:after {
  border-left: 1px solid #425668; 0; 27px;
  top: 0
}

.nav>li>a { block
}

.nav.child_menu>li>a,.nav.side-menu>li>a { #E7E7E7; 500
}

.nav li li.current-page a,.nav.child_menu li li a.active,.nav.child_menu li li a:hover { #fff
}

.nav.child_menu li li.active,.nav.child_menu li li:hover {
  padding: 13px 15px 12px
}

.nav.side-menu>li.active,.nav.side-menu>li.current-page {
  border-right: 5px solid #1ABB9C
}

.nav li.current-page {

.nav li li li.current-page {

.nav.side-menu>li.active>a {
  text-shadow: rgba(0,.25) 0 -1px 0; linear-gradient(#334556,#2C4257),#2A3F54;
  box-shadow:

.nav>li>a:focus,.nav>li>a:hover { transparent
}

*{margin: 0;
}

body,html{ 100%; 100%;
}

.contentLeft { left; 15%;black; 0.7;
}

.contentRight { 85%;
}

script.js

$(function() {
    $.ajax({
        type: "get",url: '/demo/json/data.json'(result) {
            var res = eval(result.data);
            showSideMenu(res);
        }
    });
    $("#navmenu").on("click",".liname"(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();
    });
});
 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'>";
        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'>";
                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 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 += "</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"() {
        var index = $("#navmenu .child_menu li").index();
        $("#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"var index = $("#navmenu .three_menu").index();
        $("#navmenu .three_menu .child_menu").eq(index).slideDown();
    });
    $("#navmenu .three_menu").on("click",1)">var index = $("#navmenu .three_menu li").index();
        $("#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).css({
        "min-height": str
    });
    var bdHeight = document.documentElement.clientHeight;
    $("#rightContent").height(bdHeight - 65);
}

data.json

{
    "data": [
        {
            "menuId": "01": [
                {
                    "menuId": "001"
                },{
                    "menuId": "001"
                }
            ]
        },{
            "menuId": "01": [
                        {
                            "menuId": "001"
                        },{
                            "menuId": "001"
                        }
                    ]
                }
            ]
        }
    ]
}

由于使用了ajax，所以记得要在服务器端运行

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

相关文章