var menuopened = false; $('.toggleMenu').click(function() { var menuWrapper =$('.menu-wrapper'); if(menuWrapper.hasClass('hidden')) { menuWrapper.removeClass('hidden'); } else { menuWrapper.addClass('hidden'); } });
<div class="container"> <div class="menu-wrapper hidden"> <div class="text-center v-center" > <ul class="nav nav-pills nav-stacked"> <li><a href="#" id="closeMenu" class="text-danger toggleMenu">Close<span class="close-icon">×</span></a></li> <li><a href="#" >Menu Item 1</a></li> <li><a href="#" >Menu Item 2</a></li> <li><a href="#" >Menu Item 3</a></li> </ul> </div> </div> <button type="button" class="toggleMenu"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button> </div>
.container { padding:10px; } .menu-wrapper { position:fixed; height:100%; width:100%; background-color:#222; top:0; left:0; } .bar { display:block; width:15px; padding:2px; margin:2px; border-radius:2px; background-color:#444; } .v-center { text-align:center; position:relative; top:50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); } .close-icon { padding:0 10px; }