Responsive Nav
Responsive navigation plugin without library dependencies and with fast touch screen support. Try it out by resizing this window.
Download
Features
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. 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. View live demo or resize this window to see the plugin in action.
- Weighs only ~1KB minified and Gzip’ed.
- Doesn’t require any external libraries.
- Uses CSS3 transitions, touch events and simple markup.
- 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.
Usage Instructions
Following the steps below you will be able to get the plugin up and running. If you notice any bugs, please post them to GitHub issues.
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: 284, // Integer: Speed of the transition, in milliseconds
label: "Menu", // String: Label for the navigation toggle
insert: "before", // String: Insert the toggle before or after the navigation
customToggle: "", // Selector: Specify the ID of a custom toggle
closeOnNavClick: false, // Boolean: Close the navigation when one of the links are clicked
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!
navActiveClass: "js-nav-active", // String: Class that is added to element when nav is active
jsClass: "js", // String: 'JS enabled' class which is added to element
init: function(){}, // Function: Init callback
open: function(){}, // Function: Open callback
close: function(){} // Function: Close callback
});
Public methods
// Destroy
nav.destroy();
// Toggle
nav.toggle();
// Open
nav.open();
// Close
nav.close();
// Resize
nav.resize();