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

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>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,406评论 6赞 503
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,732评论 3赞 393
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,711评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,380评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,432评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,301评论 1赞 301
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,145评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,008评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,443评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3赞 334
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1赞 347
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,501评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,119评论 3赞 328
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2赞 354