menu slide

by Jos Vermeulen

HTML

<div id="toggle" class="hand-cursor">
<!--   <p class="menu-tekst">MENU</p>   -->
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>
<div class="pw-beweeg-menu">
</div>

CSS

.pw-beweeg-menu {
  display: block;
  margin: 0 30vw;
  position: fixed;
  top: 0;
  z-index: -10!important;
  background: lightgrey;
  width: 30vw;
  height: 30vh;
  display: none;
}


.menu-tekst{
  float:right;
  padding-right: 35px;
  position: relative;
  top:-2.6vh;
}
.hand-cursor {
  cursor: pointer;
}

.vertical_line{
  border-right: 2px;
  border-right-color: #00000;
  border-right-style: solid;
}

.vertical_line-2{
  border-left: 2px;
  border-left-color: #00000;
  border-left-style: solid; 
}

#toggle {
  width:  28px;
  height: 30px;
  margin: 10px auto;
}

#toggle div {
  width: 100%;
  height: 5px;
  background: black;
  margin: 4px auto;
  transition: all 0.3s;
  backface-visibility: hidden;
  z-index: 10!important;
}

#toggle.on .one {
  transform: rotate(45deg) translate(5px, 5px);
}

#toggle.on .two {
  opacity: 0;
}

#toggle.on .three {
  transform: rotate(-45deg) translate(7px, -8px);
}

JavaScript

jQuery(function($){
$("#toggle").click(function() {
$(this).toggleClass("on");
$(".pw-beweeg-menu").slideToggle();
});
});