Menu slide with jQuery

---

Description: 

See Dustsolutions with the sliding menu panel. https://www.dustsolutions.nl/

See jsfiddle

---

Kind:

CSS, HTML, jQuery

---

CSS:

.menu-tekst{
float:right;
padding-right: 35px
}
.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);
}

---

HTML:

<div id="toggle">
  <p class="menu-tekst">MENU</p>  
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

---

Javascript:

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

---