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