# responsive-nav.js **Repository Path**: wu_mingwei/responsive-nav.js ## Basic Information - **Project Name**: responsive-nav.js - **Description**: Responsive navigation plugin without library dependencies and with fast touch screen support. - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-04-09 - **Last Updated**: 2025-01-04 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Responsive Nav ### Responsive navigation plugin without library dependencies and with fast touch screen support. [Responsive Nav](http://responsive-nav.com) is a tiny JavaScript plugin which weighs only 1.3kb 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. #### Features: * Simple, semantic markup. * Weighs only 1.3kb 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 * [Fixed positioned one page demo](http://www.adtile.me/fixed-nav/) using smooth scrolling. View source on GitHub: [adtile/fixed-nav](https://github.com/adtile/fixed-nav) * [Advanced demo](http://responsive-nav.com/demo/) (View the [source code](https://github.com/viljamis/responsive-nav.js/tree/master/demos/advanced-left-navigation)) * [Official website](http://responsive-nav.com) (works as a demo, too!) * [Simple demo with IE support](http://responsive-nav.com/demo-respondjs/) (View the [source code](https://github.com/viljamis/responsive-nav.js/tree/master/demos/ie-support-using-respondjs)) * 11(!) additional examples included in this repository's [demos](https://github.com/viljamis/responsive-nav.js/tree/master/demos) folder. # 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](https://github.com/viljamis/responsive-nav.js/issues). 1. Link files: ```html ``` 1. Add markup: ```html ``` 1. Hook up the plugin: ```html ``` 1. Customizable options: ```javascript 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 See the [example code here](https://github.com/viljamis/responsive-nav.js/blob/master/demos/public-events/index.html) for the usage. `nav.toggle();` `nav.open();` `nav.close();` `nav.destroy();` `nav.resize();` # Changing the breakpoint Breakpoint is defined in the [responsive-nav.css](https://github.com/viljamis/responsive-nav.js/blob/master/responsive-nav.css) file. Responsive Nav checks on window resize and on orientation change if the navigation toggle has `display: none;` and based on that switches between mobile and desktop states. # Supporting old IEs Even though Responsive Nav works even on IE6, you should remember that IE8 and under do not support media queries and thus can’t change between "small screen" and "large screen" styles. If needed, you can add Media Query support for those browsers using [respond.js](https://github.com/scottjehl/Respond). There’s an example [here](https://github.com/viljamis/responsive-nav.js/tree/master/demos/ie-support-using-respondjs). When old IE support is needed you should stick to using ID selector with Responsive Nav. That’s because the plugin uses `getElementById` method by default which is widely supported in all browsers. When using classes or element selectors `querySelector` will be used instead which isn’t supported in old IEs. # Things to keep in mind Calculated Max-height doesn't account for top/bottom padding on `.nav-collapse` (this is on purpose). If you need to add padding inside the nav, you can apply it to any other element, for example the `