导航页按钮优化

master
lixin 5 years ago
parent 8515421ba9
commit 431c5495ba

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

@ -41,6 +41,7 @@
.sidebar-mini.sidebar-collapse #indexTreeMenu .modleSelected .pull-right-container{
margin-top: -6px;
}
.home-menu:hover .dropdown-menu {display: block;}
</style>
<body class="hold-transition skin-blue sidebar-mini" scroll="no">
<input type="hidden" id="userId" value="${CURRENT_USER.userId}">
@ -97,13 +98,9 @@
</c:choose>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-home" style="font-size: 20px"></i></a>
<li class="home-menu">
<a href="${path}/gatewayPage"><i class="fa fa-home" style="font-size: 20px" title="点击返回首页"></i></a>
<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>
</ul>
</li>

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