Menu slides out

---

Description: 

A (big) menu that slides out.
Hamburger changes into cross.

Add jQuery to Beaver Builder lay-out CSS/Javascript

---

Kind:

CSS, HTML, jQuery, Beaver

---

CSS:

/* Dit is tekst “menu” met X */
 .hand-cursor {
cursor: pointer; }

#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);
} 

.menu-tekst{
float:right;
margin-right:40px; }

/* Dit de rij met het menu en eventueel het zoekveld */
 .header-fixed{
position: fixed; 
top: 0;
left: 0;
right: 0; 
z-index: 10;
 width:100%;
}

/* Dit de rij met inhoud wat moet “bewegen / toggle” */
 .beweeg-menu{
background-color:red; z-index: 9999; position:fixed; width:100%; /*display:none;*/ display:none;
}

/* zorg dat de content niet achter het menu verdwijnt */
 .fl-page-content {
margin-top: 100px; }

---

HTML:

&gdiv id="toggle" class="hand-cursor" >
MENU
 


 

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