Responsive sidebar push menu
innovation
I have a question about responsive sidebar menu. First, I'll give you a demo from codepen.io
If you change the width of the archer, you can see the green button in the upper right corner. When you click this button, the red background color div will open. But at the same time if you change the Bowser width 640pxto , 900pxthe red div doesn't go back to the original area.
How can I solve this problem can someone help me?
HTML
<div class="test_container">
<div class="left">
<div class="left_in"><div class="aa">ss</div></div>
</div>
<div class="r click_open_close">Click To Show Slide sLeft In</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: 0%;
height: 100%;
background-color: #f7f7f7;
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;
right: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;
}
@media all and (max-width: 840px) {
.left {
left:-60%;
}
.secret {
float: left;
display: block;
}
.right {
width: 100%;
}
.click_open_close{
display:block;
}
}
JS
$('.click_open_close').click(function() {
$('.left').animate({
left: "0%"
}, 200);
$('.right').animate({
right: "-30%"
}, 200);
});
Marco Ramirez Castro
Try this
$(document).ready(function(e) {
$('.click_open_close').click(function() {
$('.left').animate({
left: "0%"
}, 200);
});
});
$(window).resize(function(e) {
var windoww = $(window).width();
if(windoww < 840){
location.reload(); //or set whatever animation you want to do for the sidebar gets back in place
};
});