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

a simple Responsive Nav is a tiny JavaScript plugin which weighs only ~1kb minified and Gzip’ed, and helps you to create a toggled navigation for small screens like smart phone, ipad and any mobile devices . It uses touch events and CSS3 transitions for the best possible performance your web site. 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 .

Features:

Simple, semantic markup.

Weighs only ~1kb minified and Gzip’ed.

Doesn’t require any external library.

Uses CSS3 transitions and touch events.

Supports RequireJS and multiple instances.

Removes the 300ms 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.

Demos

Simple demo with IE support

Advanced demo

download now

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:

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

Hook up the plugin:

<!-- Put this right before the </body> closing tag -->
<script>
 var nav = responsiveNav(".nav-collapse");
</script>

Customizable options:

var nav = responsiveNav(".nav-collapse", // Selector
 animate: true, // Boolean: Use CSS3 transitions, true or false
 transition: 250, // 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
 navClass: "nav-collapse", // String: Default CSS class. If changed, you need to edit the CSS too!
 jsClass: "js", // String: 'JS enabled' class which is added to <html> element
 init: function(), // Function: Init callback
 open: function(), // Function: Open callback
 close: function() // Function: Close callback
);

Public methods

nav.toggle();

nav.destroy();

nav.resize();

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

responsive-nav

tutorialworld4u

Friday, January 10, 2014