左侧导航栏（有json）2020-08-31

2020-09-01  本文已影响0人  铁血豪侠5v

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 += "<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/"
}
]
}
]
}
]
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>左侧导航</title>
    <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" href="css/custom.min.css" />
</head>
<style type="text/css">
    *{
        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%;
    }
    
</style>

<body class="nav-md">

    <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://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="https://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
    <script src="js/home.js" type="text/javascript" charset="utf-8"></script>

</body>

</html>

上一篇下一篇

猜你喜欢

热点阅读