Free Responsive Menu

ads

free-responsive-menu-webtoos

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

ads
Get our hottest stories to your inbox.
Check your inbox for a confirmation email.

Have something to add to this story? Share it in the comments.

Have something to add to this story? Share it in the comments.

Leave a Reply

Your email address will not be published. Required fields are marked *