HTML
<div id="mobile_menu_wrap_1" class="mobile_menu_wrap">
<div class="hamburger lw_class_on_off" data-what="#mobile_menu_wrap_1" data-what-class="mobile_on" >
<div class="top_bun"></div>
<div class="lettuce"></div>
<div class="patty"></div>
<div class="bottom_bun"></div>
</div>
<div class='mobile_menu'>
<?php echo do_shortcode('[display_menu]'); ?>
</div>
</div>
CSS
.mobile_menu_wrap {
display: inline-block;
vertical-align: top;
width: 40px;
cursor: pointer;
margin-top: 3px;
}
.hamburger {
display: inline-block;
vertical-align: top;
width: 40px;
height: 25px;
cursor: pointer;
margin-top: 3px;
}
.hamburger div {
height: 3px;
background-color: #ffffff;
margin-bottom: 4px;
position: relative;
top: 0px;
transition: all .1s ease;
}
.hamburger:hover .top_bun {
top: -5px;
transition: all .1s ease;
}
.hamburger:hover .lettuce {
top: -2px;
transition: all .1s ease;
}
.hamburger:hover .patty {
top: 2px;
transition: all .1s ease;
}
.hamburger:hover .bottom_bun {
top: 5px;
transition: all .1s ease;
}
.mobile_menu {
position: absolute;
right: -200px;
width: 200px;
height: 500px;
background-color: aqua;
transition: all .5s ease;
top: 103px;
}
.mobile_on .mobile_menu {
right: 0px;
text-align: left;
}
.mobile_on .lettuce {
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
transition: rotate .4s ease;
top: 10px !important;
}
.mobile_on .patty {
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
transition: rotate .4s ease;
top: 4px !important;
}
.mobile_on .top_bun {
display: none;
}
.mobile_on .bottom_bun {
display: none;
}
JS
$( ".lw_class_on_off" ).click(function() { //2AM ON AND OFF
var what = $(this).attr("data-what");
if (what == "parent") { what = $(this).parent(); }
if (what == "this") { what = $(this); }
var what_class = $(this).attr("data-what-class");
var what_class_off = $(this).attr("data-what-class-off");
var has_class = false;
if ($(what).hasClass( what_class )) { has_class = true; }
if (what_class_off != "undefined") { $( what_class_off ).removeClass( what_class ); }
if (has_class == false) {
$(what).addClass(what_class);
}else{
$(what).removeClass(what_class);
}
}); //2AM ON AND OFF