Mobile Menu Setup

Set up mobile menu

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
Comments