导航页按钮优化

master
lixin 5 years ago
parent 8515421ba9
commit 431c5495ba

@ -48,13 +48,24 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.home-sidebar-menu>li{
padding: 22px 0;
}
.skin-blue .sidebar-menu>li:hover,.skin-blue .sidebar-menu>li.active{
background: #1e282c;
}
.skin-blue .sidebar-menu>li:hover>.aClass,.skin-blue .sidebar-menu>li.active>.aClass{
color: white;
}
.aClass{ .aClass{
display: grid!important; display: grid;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: white!important; text-align: center;
color: #b8c7ce;
cursor: pointer;
} }
.aClass i{ .aClass i{
display: flex; display: flex;
@ -62,6 +73,23 @@
margin: 0 auto; margin: 0 auto;
font-size: 54px; font-size: 54px;
} }
.aClass span{
margin-top: 5px;
}
.sidebar-mini.sidebar-collapse .aClass{
font-size: 12px;
}
.sidebar-mini.sidebar-collapse .aClass>i{
font-size: 25px;
}
.home-menu:hover .dropdown-menu {display: block;}
.sidebar-mini.sidebar-collapse .img {
width: 25px;
}
.home-menu:hover .dropdown-menu {display: block;}
.sidebar-mini.sidebar-collapse .titleDiv{
font-size: 12px;
}
</style> </style>
</head> </head>
<body class="hold-transition skin-blue sidebar-mini"> <body class="hold-transition skin-blue sidebar-mini">
@ -116,8 +144,8 @@
</c:choose> </c:choose>
</a> </a>
</li> </li>
<li class="dropdown"> <li class="home-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-home" style="font-size: 21px"></i></a> <a href="${path}/gatewayPage" title="点击返回首页"><i class="fa fa-home" style="font-size: 21px"></i></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li><a href="${path}/logout?token=${token}">退出登录</a></li> <li><a href="${path}/logout?token=${token}">退出登录</a></li>
</ul> </ul>
@ -128,42 +156,42 @@
</header> </header>
<aside class="main-sidebar"> <aside class="main-sidebar">
<section class="sidebar"> <section class="sidebar">
<ul class="sidebar-menu" data-widget="tree"> <ul class="sidebar-menu home-sidebar-menu" data-widget="tree">
<li> <li class="active">
<a class="aClass" onclick="mainManage()"> <div class="aClass" onclick="menuClick(this,'home')">
<i class="fa fa-home"></i> <i class="fa fa-home"></i>
<span>主页</span> <span>主页</span>
</a> </div>
</li> </li>
<li> <li>
<a class="aClass" onclick="noticeManage()"> <div class="aClass" onclick="menuClick(this,'notice')">
<i class="fa fa-file"></i> <i class="fa fa-file"></i>
<span>通知信息</span> <span>通知信息</span>
</a> </div>
</li> </li>
<li> <li>
<a class="aClass" onclick="helpDocumentManage()"> <div class="aClass" onclick="menuClick(this,'help')">
<i class="fa fa-info"></i> <i class="fa fa-info"></i>
<span>帮助文档</span> <span>帮助文档</span>
</a> </div>
</li> </li>
<li> <li>
<a class="aClass" onclick="updatePassword()"> <div class="aClass" onclick="menuClick(this,'pwd')">
<i class="fa fa-key"></i> <i class="fa fa-key"></i>
<span>修改密码</span> <span>修改密码</span>
</a> </div>
</li> </li>
<li> <li>
<a class="aClass" onclick="callMeManage()"> <div class="aClass" onclick="menuClick(this,'contact')">
<i class="fa fa-phone"></i> <i class="fa fa-phone"></i>
<span>联系我们</span> <span>联系我们</span>
</a> </div>
</li> </li>
</ul> </ul>
</section> </section>
</aside> </aside>
<div id="iframeDiv" style="display: none"> <div id="iframeDiv" class="content-wrapper" style="display: none">
<iframe class="row-fluid" style="margin-left:230px;height:100%;width:85%;" <iframe class="row-fluid" style="height:calc(100% - 102px);width:100%;"
id="iframe" name="iframe" scrolling="no" frameborder="0"></iframe> id="iframe" name="iframe" scrolling="no" frameborder="0"></iframe>
</div> </div>
<div class="content-wrapper" id="sectionDiv"> <div class="content-wrapper" id="sectionDiv">

@ -41,6 +41,7 @@
.sidebar-mini.sidebar-collapse #indexTreeMenu .modleSelected .pull-right-container{ .sidebar-mini.sidebar-collapse #indexTreeMenu .modleSelected .pull-right-container{
margin-top: -6px; margin-top: -6px;
} }
.home-menu:hover .dropdown-menu {display: block;}
</style> </style>
<body class="hold-transition skin-blue sidebar-mini" scroll="no"> <body class="hold-transition skin-blue sidebar-mini" scroll="no">
<input type="hidden" id="userId" value="${CURRENT_USER.userId}"> <input type="hidden" id="userId" value="${CURRENT_USER.userId}">
@ -97,13 +98,9 @@
</c:choose> </c:choose>
</a> </a>
</li> </li>
<li class="dropdown"> <li class="home-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-home" style="font-size: 20px"></i></a> <a href="${path}/gatewayPage"><i class="fa fa-home" style="font-size: 20px" title="点击返回首页"></i></a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<%--<li><a href="#">帮助</a></li>
<li><a href="#">联系我们</a></li>--%>
<li><a href="${path}/gatewayPage">返回主页</a></li>
<li class="divider"></li>
<li><a href="${path}/logout?token=${token}">退出登录</a></li> <li><a href="${path}/logout?token=${token}">退出登录</a></li>
</ul> </ul>
</li> </li>

@ -15,33 +15,25 @@ $(function(){
noticeManage(); noticeManage();
} }
}) })
function menuClick(el,type){
//跳转到主页 $(".home-sidebar-menu li").removeClass('active');
function mainManage(){ $(el).parent().addClass("active");
$("#iframeDiv").hide(); switch (type){
$("#sectionDiv").show(); case 'notice':
} $("#iframe").prop("src",path+"/notice/pageUI");
//跳转到通知 break;
function noticeManage(){ case 'pwd':
$("#iframeDiv").show(); $("#iframe").prop("src",path+"/user/toUpdatePassword");
$("#sectionDiv").hide(); break;
$("#iframe").prop("src",path+"/notice/pageUI"); case 'help':
} case 'contact':
//跳转到帮助文档 $("#iframe").prop("src",path+"/main");
function helpDocumentManage(){ }
$("#iframeDiv").show(); if(type==='home'){
$("#sectionDiv").hide(); $("#iframeDiv").hide();
$("#iframe").prop("src",path+"/main"); $("#sectionDiv").show();
} }else {
//跳转到修改密码 $("#iframeDiv").show();
function updatePassword(){ $("#sectionDiv").hide();
$("#iframeDiv").show(); }
$("#sectionDiv").hide();
$("#iframe").prop("src",path+"/user/toUpdatePassword");
}
//跳转到联系我们
function callMeManage(){
$("#iframeDiv").show();
$("#sectionDiv").hide();
$("#iframe").prop("src",path+"/main");
} }
Loading…
Cancel
Save