Responsive left sidebar open close

I have one question about responsive left sidebar open close function.

I have created this DEMO from codepen.io

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.

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

$(".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);
  }
});


Source: css3

Leave a Reply