RESPONSIVE NAV – Responsive navigation plugin without library dependencies

Responsive Nav plugin without library dependencies and with fast touch screen support.

Responsive Nav is a tiny JavaScript plugin which weighs only 1.7 KB 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.





  • Simple, semantic markup.
  • Weighs only 1.7 KB minified and Gzip’ed.
  • Doesn’t require any external library.
  • Uses CSS3 transitions and touch events.
  • Removes the 300 ms delay between a physical tap and the click event.
  • Makes it possible to use CSS3 transitions with height: auto.
  • Built with accessibility in mind, meaning that everything works on screen readers and with JavaScript disabled, too.
  • Works in all major desktop and mobile browsers, including IE 6 and up.
  • Free to use under the MIT license.



Usage instructions

Following the steps below you will be able to get the plugin up and running.

  1. Link files:
    <!-- Put these into the <head> -->
    <link rel="stylesheet" href="responsive-nav.css">
    <script src="responsive-nav.js"></script>
  2. Add markup:
    <div id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Contact</a></li>
  3. Hook up the plugin:
    <!-- Put this right before the </body> closing tag -->
        var navigation = responsiveNav("#nav");
  4. Customizable options:
    var navigation = responsiveNav("#nav", { // Selector: The ID of the wrapper
        animate: true, // Boolean: Use CSS3 transitions, true or false
        transition: 400, // Integer: Speed of the transition, in milliseconds
        label: "Menu", // String: Label for the navigation toggle
        insert: "after", // String: Insert the toggle before or after the navigation
        customToggle: "", // Selector: Specify the ID of a custom toggle
        openPos: "relative", // String: Position of the opened nav, relative or static
        jsClass: "js", // String: 'JS enabled' class which is added to <html> el
        init: function(){}, // Function: Init callback
        open: function(){}, // Function: Open callback
        close: function(){} // Function: Close callback

Public methods


Tested on the following platforms

  • iOS 4.2.1+
  • Android 1.6+
  • Windows Phone 7.5 & 7.8
  • Blackberry 7.0+
  • Blackberry Tablet 2.0+
  • Kindle 3.3+
  • Maemo 5.0+
  • Meego 1.2+
  • Symbian 3
  • Symbian Belle
  • Symbian S40 Asha
  • webOS 2.0+
  • Windows XP
  • Windows 7
  • Mac OS X
Related post:  Tutorial of the day: 3D Gold Typography in Photoshop


Divi WordPress Theme

You may also like...

Leave a Reply

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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.