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.

 

responsive-nav

DOWNLOAD

Features:

  • 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.

 

Demo

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">
        <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>
    </div>
  3. Hook up the plugin:
    <!-- Put this right before the </body> closing tag -->
    <script>
        var navigation = responsiveNav("#nav");
    </script>
  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

<code>navigation.destroy();</code>
<code>navigation.toggle();</code>

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

DOWNLOAD


You may also like...

Leave a Reply

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