html部分：
<!--头部菜单 -->
<div class="menu">
<h1 class="logo">
<a href="#"></a>
</h1>
<ul id="nav">
</ul>
<div class="fr">
<div class="user">
<s class="ico_user"></s>
<span onclick="editUser()">admin</span>
<a href="javascript:void(0);" id="logout">退出</a>
</div>
</div>
</div>
<!-- 左侧菜单 -->
<div class="sidebarmenu sidebar col-md-1" style="position: absolute;height: calc(100% - 88px); 180px;">
<ul class='sidePas'></ul>
</div>
js部分：
$(function () {
/*
* @配置菜单
* @导航数据
* */
var nav = [{
name: '监控',
url: baseUrl + 'module/home/home.html',
icon: 'glyphicon-camera',
child: []
}, {
name: '设备',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera',
child: [{
name: 'AC配置',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: 'AP',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: 'AP組',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
}]
}, {
name: 'WLAN',
url: baseUrl + 'module/wlan/wmm/wmm.html',
icon: 'glyphicon-camera',
child: [{
name: 'WMM模板',
url: baseUrl + 'module/wlan/wmm/wmm.html',
icon: 'glyphicon-camera'
},{
name: 'SSID模板',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: 'WLAN組',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: 'WLAN业务',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: '射频模板',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
}]
}, {
name: 'IOT',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera',
child: [{
name: 'IOT业务',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: '定位模板',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: '功率模板',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
}]
}, {
name: '终端',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera',
child: [{
name: '终端管理',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: '限速配置',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: '网络权限',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: '白名单',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: '终端统计',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
}]
}, {
name: '安全',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera',
child: [{
name: '认证域模板',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: '认证配置',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: '终端认证状态',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: '安全模板',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
}]
}, {
name: '系统',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera',
child: [{
name: 'AC重启',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: 'AP升级',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: 'AP重启',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: '固件管理',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: '系统时间',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: '运行日志',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: '用户管理',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: '版本信息',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
}]
}, {
name: '帮助',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera',
child: [{
name: '配置流程',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
},{
name: '名词介绍',
url: baseUrl + 'module/location/location.html',
icon: 'glyphicon-camera'
}]
}]
//创建菜单
createNav(nav);
});
function createNav(data){
var nav = $('#nav');
_.each(data, function (route, key) {
var current = null;
key == 0 ? current = 'current' : current = '';
var li = $('<li>').addClass('menu ' + current);
var s = '<s class="glyphicon '+ route.icon+'"></s>'
var a =$('<a>').append(s);
a.append(route.name);
li.append(a);
nav.append(li);
$('.sidebarmenu').hide();
$('.home-content').css('left','20px');
li.on('click', function () {
if(route.name != '监控'){
$('.sidebarmenu').show();
$('.home-content').css('left','203px');
}else{
$('.sidebarmenu').hide();
$('.home-content').css('left','20px');
}
nav.find('li').removeClass('current');
$(this).addClass('current');
$('.sidePas').html(null);
initOnePage(route.url)
var thisName = $(this).children('a').text();
for(var i=0;i<data.length;i++){
if(data[i].name == thisName){
// 左侧一级菜单
for(var j=0;j<data[i].child.length;j++){
if(data[i].child != null){
var leftSid = ' <li class="leftMenu" flag="0" onclick=initPage("'+ data[i].child[j].url + '",this)>'+
' <a class="title" href="javascript:void(0);">'+
' <s class="glyphicon '+data[i].child[j].icon+'"></s>'+data[i].child[j].name+'</a>'+
' </li>'
$('.sidePas').append(leftSid);
//左侧二级菜单
if(data[i].child[j].child != null){
for(var k=0;k<data[i].child[j].child.length;k++){
var leftTowSid = '<ul class="sideChid">'+
' <li class="leftChidMenu" flag="1" onclick=initPage("'+data[i].child[j].child[k].url+'",this)>'+
' <a href="javascript:void(0);"style>'+
' <s class="glyphicon '+data[i].child[j].child[k].icon+'" style="60px;"></s>'+data[i].child[j].child[k].name+'</a>'+
' </li>'+
'</ul>'
$('.leftMenu').append(leftTowSid)
}
}
}
}
}
}
$('.sidePas').children(":first").attr('class','leftMenu current'); //默认第一个选中
})
})
}
function initOnePage(url){ //点击头部一级菜单，默认显示第一个页面
var view_warp = $('#iframe');
view_warp.attr('src',url);
}
function initPage(url,thi){//点击左侧一级菜单，默认显示对应页面
var view_warp = $('#iframe');
view_warp.attr('src',url);
var flagNum = $(thi).attr('flag');
if(flagNum == '0'){
$('.leftMenu').attr('class','leftMenu');
$(thi).attr('class','leftMenu current');
}
if(flagNum == '1'){
$('.leftChidMenu').children('a').attr('style','background:#fff;color: #333;');
$(thi).children('a').attr('style','background:#f2f8fa;color: #1076be;');
}
}
css部分：
body {
background: #f8f8f8;
}
.home-content{
position: absolute;
top: 58px;
bottom: 37px;
right: 18px;
left: 203px;
}
.select ul {
margin: 0;
}
/* .sidebarmenu {
280px;
min-height: 550px;
float: left;
border-top: 1px solid #ebe8e8;
border-right: 1px solid #ebe8e8;
} */
.uiright{
background: #ffffff;
}
.jd-warp-right {
padding:0px;
margin-left: 280px;
min-height: 100%;
height: auto;
border-top: 8px solid #f7f7f7;
border-right: 0px solid #f7f7f7;
border-bottom: 0px solid #f7f7f7;
border-left: 8px solid #f7f7f7;
}
.jd-warp-right iframe {
background: #fff;
min-height: 550px;
}
.jd-home-footer {
position: absolute;
bottom: 5px;
100%;
padding: 5px 0;
color: #bbbbbb;
text-align: center;
}
.jd-break-point-border {
border: 1px solid #dedede;
position: relative;
height: 62px;
padding-top: 8px;
}
.jd-break-point-border .jd-title_info {
position: absolute;
top: -8px;
left: 10px;
font-size: 10px;
color: #929191;
}
.jd-port-break-point-1 .jd-break-point-remove {
position: absolute;
top: 2px;
right: 1px;
z-index: 1;
}
.jd-form-control {
padding-right:0!important;
display: block;
height: 28px;
font-size: 14px;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.jd-port_break_point_add:link {
color: #fff;
}
.jd-port-action-content {
height: 300px;
overflow-x: hidden;
overflow-y: visible;
}
.form-control{
/*padding:4px 12px;*/
padding:0 10px;
}
.sidebar li{
/* 280px;*/
border-bottom:0;
}
/*.sidebar li.current{
background: #f2f8fa;
vertical-align: middle;
color: #1076be;
}*/
.sidebarmenu li a{
color:#333;
}
.command-table .fixed-table-pagination{
display: none !important;
}
.check-view .modal-dialog{
664px !important;
}
.history-table .fixed-table-pagination {
448px;
}
.device-table .fixed-table-pagination {
display: none !important;
450px;
}
.device-table .modal-body {
min-height: 360px;
}
.history-table table{
line-height: 20px;
}
.history-table .modal-body {
min-height: 360px;
}
.oid-tree .modal-body{
min-height: 360px;
}
/*鎸囨爣淇�敼瑙勫垯鏍峰紡 */
.ul-rule-list li{
line-height: 46px;
}
.ul-rule-list li .rule-title{
display: inline-block;
66px;
}
.rule-position{
position: absolute;
top:3px;
left:0;
}
.rule-content{
margin-left: 66px;
}
.alarm_content {
background: #edf6fb8c;
padding: 10px 20px;
}
.alarm-title{
calc(100% - 66px);
float: right;
}
.chooseBtn {
display: none;
}
.choose-label {
box-shadow: #ccc 0px 0px 0px 1px;
40px;
height: 20px;
display: inline-block;
border-radius: 20px;
position: relative;
background-color: #bdbdbd;
overflow: hidden;
margin-bottom: -4px;
}
.choose-label:before {
content: '';
position: absolute;
left: 0;
20px;
height: 20px;
display: inline-block;
border-radius: 20px;
background-color: #fff;
z-index: 20;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.chooseBtn:checked + label.choose-label:before {
left: 20px;
}
.chooseBtn:checked + label.choose-label {
background-color: #2b94e5;
}
/*鑿滃崟涓��鍔犲憡璀︽樉绀�*/
.alarm .message {
position: relative;
font-size: 16px;
padding-left: 10px;
padding-right: 10px;
top: 4px;
cursor: pointer;
z-index: 9999;
}
.message .remind {
position: absolute;
top: -6px;
right: 0;
auto;
height: 14px;
line-height: 13px;
font-size: 12px;
font-weight: normal;
padding: 1px;
background: #ffb400;
color: #fff;
border-radius: 2px;
}
.fa-bell-o{
color:#fff;
}
/*涓�绾ц彍鍗曞姞杞藉憡璀�*/
.message .staRemind {
color: #9d1010;
-webkit-animation: breatheError ease 1s infinite alternate;
-o-animation: breatheError ease 1s infinite alternate;
animation: breatheError ease 1s infinite alternate;
}
.alarm-remind-icon {
20px;
height: 20px;
display: inline-block;
}
.alarm-remind-icon.normal {
/* background: url("../common/style/images/icon/ico_user.png") no-repeat center; */
background-size: 100% 100%;
}
@keyframes Tada {
0% {
transform: scale(1);
transform: scale(1)
}
10%,
20% {
transform: scale(0.8) rotate(-3deg);
transform: scale(0.8) rotate(-3deg)
}
30%,
50%,
70%,
90% {
transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
}
40%,
60%,
80% {
transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
}
100% {
transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}
}
.alarm-remind-icon.alarm {
background: url("../common/style/images/nav/icon_alarm_red.png") no-repeat center;
background-size: 100% 100%;
-webkit-animation: Tada 1s 1s both infinite;
-moz-animation: Tada 1s 1s both infinite;
-ms-animation: Tada 1s 1s both infinite;
animation: Tada 1s 1s both infinite;
}
.modal {
text-align: center;
}
@media screen and (min- 768px) {
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}