Commit 7af3dcdd authored by xinyuandu's avatar xinyuandu

修改隐藏/显示菜单的样式

parent ca87574a
......@@ -10,6 +10,33 @@
<link rel="stylesheet" href="/resource/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/resource/css/bootstrap-datetimepicker.min.css">
<title>同联商业</title>
<style>
/*隐藏显示按钮(梯形)样式代码*/
.hideBtn1{
position: relative;
right:-1px;
border-top: 0px solid transparent;
border-bottom: 20px solid transparent;
border-right: 22px solid #1a1a1a;
border-left: 0px solid #1a1a1a ;
height: 80px;
width: 0;
line-height: 20px;
font-size:12px;
}
.hideBtn2{
position: relative;
right:-1px;
border-top: 0px solid transparent;
border-bottom: 20px solid transparent;
border-right: 0px solid #ff9419;
border-left: 22px solid #ff9419 ;
height: 80px;
width: 0;
line-height: 20px;
font-size:12px;
}
</style>
</head>
<body>
......@@ -35,15 +62,18 @@
</ul>
</div>
</div>
<!--添加隐藏按钮-->
<div id="hide_menu">
<span class="width-136-hide">
隐藏
<!--<div id="hideLine" style="width:2px;height:80px;background-color: #000000;float:left;display:inline;display:none"></div>
--><!--添加隐藏按钮-->
<div id="hide_menu" class="" style="width:2%;display:inline;">
<div class="width-136-hide hideBtn1" style=";text-align:center;">
<span style="position:relative;left:3px;top:10px">隐藏</span>
<!--<img src="/resource/image/icon_down@2x.png" class="text-icon-hide"/>-->
</span>
</div>
</div>
<div id="wrapper">
<div id="wrapper" style="width:98% !important;float:right !important;display:inline">
{include file="global/navigation" /}
{__CONTENT__}
{include file="global/footer_tpl" /}
......
......@@ -99,6 +99,13 @@ a:hover{
width: 12%;
z-index: 1000;
float: left;
animation: myfirst s;
}
@keyframes myfirst
{
0% { width:0%}
100% {width : 12%}
}
#sidebar-wrapper::-webkit-scrollbar {
......@@ -130,7 +137,7 @@ a:hover{
line-height: 36px;
text-align: center;
float: left;
background-color: rgba(0,0,0,.2);
/*background-color: rgba(0,0,0,.2);*/
font-size:15px;
cursor:pointer;
......@@ -254,6 +261,11 @@ a:hover{
.span-list{
margin-left: 6px;
}
.span-list:hover {
font-size:14px;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus {
background:rgba(255,148,25,0.1) !important;
}
......
......@@ -103,14 +103,25 @@ define(['doT', 'jquery', 'text!temp/menu_template_tpl.html', 'layer'], function
e.preventDefault();
e.stopPropagation();
var _this = $(this);
if($.trim(_this.html()).indexOf("隐藏")!=-1){
if($('.width-136-hide').find('span').text() == "隐藏"){
//if($.trim(_this.html()).indexOf("隐藏")!=-1){
//$('#hideLine').show();
$('.width-136-hide').removeClass("hideBtn1");
$('.width-136-hide').addClass("hideBtn2");
$('.width-136-hide').find('span').css("left","-17px");
$('#sidebar-wrapper').hide();
_this.html('显示<img src="/resource/image/icon_down_hide@2x.png" class="text-icon-hide"/>');
$('.width-136-hide').find('span').text("显示");
//_this.html('显示<img src="/resource/image/icon_down_hide@2x.png" class="text-icon-hide"/>');
$("#page-content-wrapper").css("width","100%");//内容显示大小
}else{
//$('#hideLine').hide();
$('.width-136-hide').removeClass("hideBtn2");
$('.width-136-hide').addClass("hideBtn1");
$('.width-136-hide').find('span').css("left","3px");
$('#sidebar-wrapper').show();
_this.html('隐藏<img src="/resource/image/icon_down@2x.png" class="text-icon-hide"/>');
//_this.html('隐藏<img src="/resource/image/icon_down@2x.png" class="text-icon-hide"/>');
$("#page-content-wrapper").css("width","88%");//内容显示大小
$('.width-136-hide').find('span').text("隐藏");
}
});
//显示操作里的按钮
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment