// Got js? $("html").addClass("js-enabled"); // Do the menu stuff $(function menuToggle() { // Make a lovely nav toggle element $('.menu').prepend('<a class="nav-toggle" href="#">Menu</div>'); // Give us a hook (.active) we can style when the toggle is clicked $('.nav-toggle').click(function() { $('nav').toggleClass('active'); return false; }); });
<div class="menu"> <nav> <ul> <li><a href="#">link1</a></li> <li><a href="#">link2</a></li> <li><a href="#">link3</a></li> <li><a href="#">link4</a></li> </ul> </nav> </div>
body {width: 90%; margin: 1em auto;} /* The default, responsive menu, no JS scenario. */ nav a, .nav-toggle {display: block; padding: .5em; margin: 0 0 .25em 0; background: #e5e5e5; border: 1px solid #ccc;} /* Let's collapse that if we have JS */ .js-enabled nav {height: 0; overflow: hidden} /* Then bring it back if we have JS and the toggle is clicked */ .js-enabled nav.active {height: auto;} /* Now you can start laying on the fancy stuff, go! */