左側(cè)導(dǎo)航欄（有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();
});

});

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": "基礎(chǔ)信息管理",
"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": "技能等級(jí)",
"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": "證書統(tǒng)計(jì)",
"menuCode": "RR1234",
"menuAction": "https://www.baidu.com/"
}
]
}, {
"menuId": "01",
"menuName": "證書統(tǒng)計(jì)",
"menuCode": "RR1234",
"menuAction": "#",
"children": [
{
"menuId": "001",
"menuName": "員工證書統(tǒng)計(jì)",
"menuCode": "RR1234",
"menuAction": "https://www.baidu.com/"
}, {
"menuId": "001",
"menuName": "單位各證書情況",
"menuCode": "RR1234",
"menuAction": "https://www.baidu.com/"
}
]
}, {
"menuId": "01",
"menuName": "系統(tǒng)管理",
"menuCode": "RR1234",
"menuAction": "#",
"children": [
{
"menuId": "001",
"menuName": "機(jī)構(gòu)管理",
"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": "人員動(dòng)態(tài)管理",
"menuCode": "RR1234",
"menuAction": "#",
"children": [
{
"menuId": "001",
"menuName": "人員異動(dòng)匯總",
"menuCode": "RR1234",
"menuAction": "https://www.baidu.com/"
}, {
"menuId": "001",
"menuName": "人員調(diào)整(發(fā)起)",
"menuCode": "RR1234",
"menuAction": "https://www.baidu.com/"
}, {
"menuId": "001",
"menuName": "人員調(diào)整(審批)",
"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": "學(xué)歷信息",
"menuCode": "RR1234",
"menuAction": "https://www.baidu.com/"
},{
"menuId": "001",
"menuName": "身份信息",
"menuCode": "RR1234",
"menuAction": "https://www.baidu.com/"
},{
"menuId": "001",
"menuName": "現(xiàn)場(chǎng)測(cè)評(píng)",
"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>左側(cè)導(dǎo)航</title>
    <link rel="stylesheet" >
    <link rel="stylesheet" >
    <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>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末傻铣，一起剝皮案震驚了整個(gè)濱河市裆馒，隨后出現(xiàn)的幾起案子圾亏，更是在濱河造成了極大的恐慌滞磺，老刑警劉巖，帶你破解...
沈念sama閱讀 212,332評(píng)論 6贊 493
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件凡恍，死亡現(xiàn)場(chǎng)離奇詭異介牙，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)践盼，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,508評(píng)論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來宾巍，“玉大人宏侍，你說我怎么就攤上這事∈衿幔” “怎么了？”我有些...
開封第一講書人閱讀 157,812評(píng)論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵咱旱，是天一觀的道長(zhǎng)确丢。經(jīng)常有香客問我，道長(zhǎng)吐限，這世上最難降的妖魔是什么鲜侥？我笑而不...
開封第一講書人閱讀 56,607評(píng)論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮诸典，結(jié)果婚禮上描函，老公的妹妹穿的比我還像新娘。我一直安慰自己狐粱，他們只是感情好舀寓，可當(dāng)我...
茶點(diǎn)故事閱讀 65,728評(píng)論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著肌蜻，像睡著了一般互墓。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上蒋搜，一...
開封第一講書人閱讀 49,919評(píng)論 1贊 290
城市分裂傳說
那天篡撵，我揣著相機(jī)與錄音，去河邊找鬼豆挽。笑死育谬，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的帮哈。我是一名探鬼主播膛檀，決...
沈念sama閱讀 39,071評(píng)論 3贊 410
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來了宿刮？” 一聲冷哼從身側(cè)響起互站，我...
開封第一講書人閱讀 37,802評(píng)論 0贊 268
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎僵缺，沒想到半個(gè)月后胡桃，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體围苫，經(jīng)...
沈念sama閱讀 44,256評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡险毁，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,576評(píng)論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了耀销。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片自脯。...
茶點(diǎn)故事閱讀 38,712評(píng)論 1贊 341
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡之景，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出膏潮，到底是詐尸還是另有隱情锻狗，我是刑警寧澤，帶...
沈念sama閱讀 34,389評(píng)論 4贊 332
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布焕参，位于F島的核電站轻纪，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏叠纷。R本人自食惡果不足惜刻帚，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 40,032評(píng)論 3贊 316
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望涩嚣。院中可真熱鬧崇众，春花似錦、人聲如沸航厚。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,798評(píng)論 0贊 21
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽幔睬。三九已至衙吩，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間溪窒，已是汗流浹背坤塞。一陣腳步聲響...
開封第一講書人閱讀 32,026評(píng)論 1贊 266
情欲美人皮
我被黑心中介騙來泰國(guó)打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留澈蚌，地道東北人摹芙。一個(gè)月前我還...
沈念sama閱讀 46,473評(píng)論 2贊 360
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像宛瞄，于是被迫代替她去往敵國(guó)和親浮禾。傳聞我的和親對(duì)象是個(gè)殘疾皇子交胚，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,606評(píng)論 2贊 350