响应左侧边栏打开关闭 [英] Responsive left sidebar open close
问题描述
我有一个关于响应式左侧边栏打开关闭函数的问题。
I have one question about responsive left sidebar open close function.
我创建了 codepen.io
查看shadowman86 / pen / VLKamErel =nofollow> DEMO 在演示中有一个按钮（点击显示蓝色div ）。当你点击这个按钮，然后蓝色div将从左侧打开。这是确定，但如果你改变你的浏览器 width< 800px ，则会显示 .left div。之后，如果您再次点击（点击显示蓝色div ）蓝色div不打开，同时如果您更改浏览器 width> 880px 然后你可以看到蓝色div仍然打开，因为你点击它之前。
You can see in the demo there is a button (Click to show blue div). When you click this button then blue div will open from left side. It is ok but if you change your browser width < 800px then the .left div will displayed. After than if you click again (Click to show blue div) the blue div not opening, also at the same time if you change your browser width>880px then you can see the blue div still be opened because you clicked it before.
我想在浏览器宽度<880像素时点击它（点击显示蓝色div ），然后我想显示蓝色
I want to make it when browser width<880px and when i click the (Click to show blue div) then i want to show blue div from left side.
我可以怎样做，任何人都可以帮助我在这方面？
How can i do that anyone can help me in this regard ?
HTML
<div class="test_container">
<div class="left">
<div class="left_in">Here is a some text</div>
<div class="problem-div">
<div class="proglem-div-in">
<!--Here is a some menu-->
</div>
</div>
</div>
<div class="gb" data-id="1" data-state="close">Click To Show Blue Div</div>
<div class="right">
<div class="bb"></div>
</div>
</div>
CSS
.test_container {
display: block;
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
max-width: 980px;
min-width: 300px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
background-color: #000;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
min-height: 140px;
}
.left {
display: block;
position: absolute;
float: left;
width: 30%;
overflow: hidden;
padding: 0px;
bottom: 0;
top: 0;
left: 0;
background-color: red;
border-right: 1px solid #d8dbdf;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
.left_in {
z-index: 999 !important;
position: absolute;
float: left;
width: 100%;
height: 100%;
background-color: red;
opacity: 0;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideLeft;
animation-name: slideLeft;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(25rem);
transform: translateX(25rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideLeft {
0% {
-webkit-transform: translateX(15rem);
transform: translateX(15rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.aa {
background-color: #f7f7f7;
/*background-color: #dfdfdf;
background-image: -webkit-linear-gradient(top,#dddbd1,#d2dbdc);
background-image: linear-gradient(top,#dddbd1,#d2dbdc);*/
width: 0;
top: 0;
border-radius: 0%;
z-index: 1000;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
overflow: hidden;
position: absolute;
left: 0;
}
.click_open_close {
right: 0px;
padding: 10px;
color: #fff;
position: absolute;
background-color: green;
cursor: pointer;
z-index: 999;
display: none;
}
.pp {
right: 0px;
padding: 10px;
color: #fff;
position: absolute;
background-color: green;
cursor: pointer;
}
.right {
display: block;
position: absolute;
width: 70%;
bottom: 0;
top: 0;
right: 0%;
background-color: pink;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.gb {
cursor: pointer;
position: absolute;
left: 30%;
padding: 10px;
color: #fff;
background-color: black;
z-index: 9999;
}
.problem-div {
z-index: 999 !important;
position: absolute;
float: left;
width: 0%;
height: 100%;
background-color: blue;
opacity: 0;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideLeft;
animation-name: slideLeft;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media all and (max-width: 840px) {
.left {
left: -60%;
z-index: 9999999999999 !important;
}
.secret {
float: left;
display: block;
}
.right {
width: 100%;
}
.click_open_close {
display: block;
}
}
JS >
JS
$(".gb").on('click', function() {
var id = $(this).data("id");
var state = $(this).data("state");
if (state === "close") {
$(this).data("state", 'open');
$(".problem-div").animate({
width: "100%"
}, 200).find(".proglem-div-in").animate({
width: "100%"
}, 200);
} else {
$(this).data("state", 'close');
$(".problem-div").animate({
width: "0%"
}, 200).find(".proglem-div-in").animate({
width: "0%"
}, 200);
}
});
推荐答案
问题是用CSS替换媒体查询css这个CSS：
The problem is with CSS, replace media query css with this CSS:
@media all and (max-width: 840px) {
.left {
z-index: 9999999999999 !important;
}
.secret {
float: left;
display: block;
}
.click_open_close {
display: block;
}
}
这篇关于响应左侧边栏打开关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
