Responsive navigation plugin without library dependencies and with fast touch screen support. Try it out by resizing this window.

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.

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