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.
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
- Simple demo with IE support (View the source code)
- Advanced demo (View the source code)
- Official website (works as a demo, too!)
- Seven additional examples included in this repository’s demos folder.
Usage instructions
Following the steps below you will be able to get the plugin up and running.
- Link files:
<!-- Put these into the <head> --> <link rel="stylesheet" href="responsive-nav.css"> <script src="responsive-nav.js"></script>
- 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> - Hook up the plugin:
<!-- Put this right before the </body> closing tag --> <script> var navigation = responsiveNav("#nav"); </script> - 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
Related articles
![Design & Development Resources Worth Checking Out [Week 09]](http://designify.me/wp-content/uploads/design-dev-resources-160x160.jpg)
