Responsive Nav is tiny JavaScript plugin which weighs only ~1KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from height: 0 to height: auto, which isn’t normally possible with CSS3 transitions.
How to use Responsive Nav
Put these into the head tag
<link rel="stylesheet" href="responsive-nav.css">
<script src="responsive-nav.js"></script>
Add Markup
<nav class="nav-collapse">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Put this right before the body closing tag
<script>
var nav = responsiveNav(".nav-collapse");
</script>
Demo Download Responsive Nav.zip