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

Overview

Responsive Nav

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

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

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.

  1. Link files:

    	<!-- Put these into the <head> -->
    	<link rel="stylesheet" href="responsive-nav.css">
    	<script src="responsive-nav.js"></script>
  2. 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>
  3. Hook up the plugin:

    <!-- Put this right before the </body> closing tag -->
    	<script>
    		var nav = responsiveNav(".nav-collapse");
    	</script>
  4. 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 <html> element when nav is active
    		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

See the example code here for the usage.

nav.toggle();

nav.open();

nav.close();

nav.destroy();

nav.resize();

Changing the breakpoint

Breakpoint is defined in the 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. There’s an example here.

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 <ul> inside .nav-collapse.

Tested on the following platforms

  • iOS 4.2.1+
  • Android 1.6+
  • Windows Phone 7.5+
  • Blackberry 7.0+
  • Blackberry Tablet 2.0+
  • Jolla 1.0+
  • Kindle 3.3+
  • Maemo 5.0+
  • Meego 1.2+
  • Symbian 3
  • Symbian Belle
  • Symbian S40 Asha
  • webOS 2.0+
  • Windows XP+
  • Mac OS X

Working on the repository

GruntJS is used for the build process, which means node and npm are required. If you already have those on your machine, you can install Grunt and all dependencies required for the build using:

npm install -g grunt-cli
npm install

Starting the server

python -m SimpleHTTPServer 8000

Git Hooks

It is useful to setup a pre-commit and post-checkout hooks to smooth your workflow. On pre-commit we want to ensure that the project can build successfully, and on post-checkout we want to ensure that any new dependencies are installed via npm.

Pre-Commit

touch .git/hooks/pre-commit && echo -e '#!/bin/sh\ngrunt test' > .git/hooks/pre-commit && chmod +x .git/hooks/pre-commit

Post-Checkout

touch .git/hooks/post-checkout && echo -e '#!/bin/sh\nnpm install\nexit 0' > .git/hooks/post-checkout && chmod +x .git/hooks/post-checkout

Building The Project

To build the project, run unit tests etc. enter the following at the terminal:

grunt

Grunt can also be used to monitor files and re-build the project on each change. For this we use Grunt's watch task:

grunt watch

Next time you change the file, Grunt will perform all build tasks.

Testing

The test suite can be run with grunt test and is also part of the default Grunt task. This command runs all tests locally using PhantomJS.

Running on multiple devices/browsers

It's possible to run the test suite on multiple devices with Karma.

The Karma server can be started with grunt karma and multiple browsers should then point to the machine running the server on port 9876 (e.g. http://localhost:9876). Once the browsers are connected, the test suite can be run with grunt karma:all:run.

An easier way to test on multiple devices as part of the development cycle is to use karma with the watch task. Running grunt karma watch will automatically start the Karma server in the background and will run the tests automatically every time a file changes, on every connected device.

Special thanks

In random order:

License

Licensed under the MIT license.

Copyright (c) 2013 Viljami Salminen, http://viljamis.com/

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Changelog

1.0.39 (2015-04-09) - Adds Browserify support.

1.0.38 (2015-04-02) - Fixes custom-toggle demo, adds feature detection for event.stopImmediatePropagation, removes all pointer-event hacks completely and also fixes an issue which caused multiple taps to sometimes freeze the nav completely.

1.0.34 (2014-12-16) - Fixes versioning.

1.0.33 (2014-12-15) - "closeOnNavClick" now works on old IEs too, so no more features that only work in modern browsers. Fixes a bug which caused the navigation to sometimes not toggle. Also fixes a bug in Safari that sometimes caused the navigation render incorrectly when switching between browser tabs. (+Adds more comments to the code.)

1.0.32 (2014-03-05) - Ditching the [].forEach.call(NodeList) hack to make the code more sensible and future-proof.

1.0.31 (2014-03-02) - Fixes Chrome Mobile rendering issue.

1.0.30 (2014-03-02) - Better performance. New fixed navigation example provided by Adtile. This release fixes an issue where multiple navigations on the same page got the same calculated height. Toggle now has an "active" class when the nav is open. Two new options are added: "closeOnNavClick" and "navActiveClass". Two new methods are also added: "open" and "close" (thanks to @munkius for the heads up on this!). This release adds also better "hamburger" icon for advanced demos which you can now style via css (size, color, shadow & etc). Includes also other bug fixes targeting older Android devices.

1.0.25 (2013-12-13) - Fixes ghost click issues on Android + a problem where calculated max-height might get overridden under certain circumstances.

1.0.24 (2013-11-27) - Adds new option called "navClass." All tests should also work now on real iOS, Windows Phone and Android devices (when using grunt-karma), and not just with PhantomJS.

1.0.23 (2013-09-25) - Fixes IE8 bugs + starts using automated builds and tests.

1.0.22 (2013-09-19) - Public resize method (to allow calling resize manually when needed).

1.0.21 (2013-09-18) - Multiple instances are now possible thanks to @toomuchdesign. Uses classes instead of ID's now by default, but can be configured to use ID's if old IE support is needed (check the "ie-support" folder in demos).

1.0.20 (2013-08-12) - Uses now touchmove & touchend, which means that the menu doesn’t trigger anymore if the user starts moving finger instead of just tapping. Also fixes one Android bug and a bug which appeared when tapping the toggle really fast over and over. Plugin’s Functionality doesn’t depent on window load event anymore so it works now with tools like require.js too.

1.0.16 (2013-08-02) - Set navOpen state in the _init method. Thanks @nicolashery!

1.0.15 (2013-06-28) - Responsive Nav now automatically combines multiple navigations inside a container.

1.0.14 (2013-04-13) - Adds touchend listener and stopProganation + prevents ghost click from happening on some Android browsers. "tabIndex" and "debug" settings are being removed.

v1.11 (2013-04-09) - Performance optimization, bug fixes and 6 additional usage examples

v1.07 (2013-04-03) - Simplifies the codebase and fixes few bugs

v1.05 (2013-03-31) - Adds callback functionality and removes unnecessary CSS.

v1.03 (2013-03-28) - Adds option to disable CSS3 transitions + three other options called "tabIndex", "openPos" and "jsClass".

v1.00 (2013-03-25) - Release. Big thank you’s for the help go out to @cubiq, @stowball, @jcxplorer and @vesan!

Want to do a pull request?

Great! New ideas are more than welcome, but please check the Pull Request Guidelines first before doing so.

Comments
  • Menu disappearing in IE8, appears on resize

    Menu disappearing in IE8, appears on resize

    In IE8 the menu disappears and only shows if you re-size your browser (even by 1-2 pixels). The menu shows if the page is loaded or sized below the break-point. But essentially in IE8 at anything above the break-point the menu isn't initially there until you re-size.

    I have uploaded the demo files direct to my site. I haven't changed anything in these. http://jamesrobertedward.com/responsive-nav.js-master/demos/ie-support-using-respondjs/

    Note: seems to be fine in IE7 and 10. I don't have a copy of IE9 to check.

    Thanks

    opened by jreb 10
  • Multiple Menus

    Multiple Menus

    I have two menus in my navigational area. One for languages and one for the main navigation, which are different lists. How do I set up this as one responsive Nav?

    opened by starflower 10
  • Close on click

    Close on click

    First: Thanks. This is awesome.

    I'm hoping there's a good and easy way to get the menu to toggle closed when you click li item. My guess is that that's what the public methods are for, but, that's a guess, and as far as it goes.

    Many thanks again, -m

    opened by martinconnelly 9
  • Touch event with scrolling

    Touch event with scrolling

    As always, stellar work on this. One issue so far:

    On touchscreens (tested on safari/chrome on iOS6), the menu toggle event fires as soon as your finger touches the toggle, not when it's lifted after a tap. So it essentially intercepts scrolling and turns the toggle into a dead area on the screen.

    Cheers.

    opened by MalabarFront 9
  • Any link that's a dropdown is not clickable on desktop

    Any link that's a dropdown is not clickable on desktop

    I'm using the multi-level solution and any parent dropdown link that uses the class "dropdown-toggle" can't be clicked on for desktop. If it's not a dropdown, the link can be clicked. It's the case with the demo as well. Any idea how to fix this?

    https://github.com/viljamis/responsive-nav.js/tree/multiple-levels

    opened by Lindolini 8
  • Prevent menu flashing

    Prevent menu flashing

    How can I prevent menu flashing in a website? This happens on responsive, when I open the site, the menu is already opened, and when the site is loaded completely, it collapse immediately.

    Also, I'm facing with this type of error: Error: The nav element you are trying to select doesn't exist Any solutions for solving this?

    opened by msavov 8
  • Add browserify support

    Add browserify support

    There are a couple quick things that could be done to make this work with Browserify:

    • When module.exports is present, use it to export the module instead of attaching it to global scope
    • Specify "main" in package.json

    This pull request does both of those, and passes all unit tests.

    opened by cappslock 8
  • Multiple menus max-height

    Multiple menus max-height

    Great plugin, thanks! I'm not a robot, it's Google translator :)

    A small problem max-height (.nav-collapse.opened) when using multiple menus. This problem is in the demo multiple-navigations. The maximum height of the second menu (40px) smaller than the first (80px), so the first truncated to two references.

    opened by dmitrykiselyov 8
  • `disable-pointer-events` not removed after fast touches

    `disable-pointer-events` not removed after fast touches

    After tapping the menu toggle for a few times (3 is enough) in quick successtion the disable-pointer-events class stays on body element. Nothing responds touch events after that. Case: https://froont.com/click/responsive-nav-problem

    opened by bez4pieci 7
  • Does not work on Opera Mini  (Android / iOS)

    Does not work on Opera Mini (Android / iOS)

    When I click the toggle-button, it refreshes the page and apparently depending on the devices either has the menu toggled open or not when the page has refreshed.

    ZTE Blade: http://youtu.be/Leqkrh6lIVQ

    Samsung Galaxy & Motorola Droid (Browserstack): http://youtu.be/og4oLKGJPTs

    Also happens on Opera Mini on iPhone 4S (iOS7)

    In the defense of Responsive Nav I'll also add that NOTHING, Literally NOTHING else works in this horrible browser either. http://youtu.be/DW0gccrf8Qw

    opened by petripottonen 7
  • Bottom menu item chops off slightly...

    Bottom menu item chops off slightly...

    The bottom menu item seems to appear full size but then you see it reduce in size after loading on mobile view. It also doesn't seem to matter how many menu items I use - it does it on 2 up to 6 items that I've tested.

    I also realise this is really a noob question to ask but I've tried restyling the hamburger and cannot get it to change from white no matter if I change the image to have a texture on it or anything else. I can obviously change the colour of the bars by changing the background colour. I was wondering if there's something in the js overriding the image to make it white?

    opened by First-Broadcast 7
  • Nav not scrollable on dropdowns (where submenus available)

    Nav not scrollable on dropdowns (where submenus available)

    Great Nav, use it for years. Recently I have found that the NAV is not scrollable ( on mobile only ) on dropdown

  • s where you have one mainlink and several sublinks to it, like so:

  • Please help here!

    Thank you and Kind Regards! IRK

    opened by gosh34 0
  • Plugin installation failed. (No valid plugins were found.)

    Plugin installation failed. (No valid plugins were found.)

    Just tried to install this on Wordpress and it failed, throwing the following error:

    The package could not be installed. No valid plugins were found.

    Plugin installation failed.

    Anyone else encountered this?

    opened by CelesteCote 0
  • Using different customToggle when js-nav-active

    Using different customToggle when js-nav-active

    I'm currently using a customToggle (hamburger). However, I was wondering if there was any way to change the cutomToggle image to an "X" when js-nav-active was active (i.e. when the drop-down menu is visible) and back to a hamburger icon when the drop-down menu is not visible. Im new to coding ... thanks in advance.

    opened by ejia-alt 0
  • Bump express from 3.3.8 to 4.17.1

    Bump express from 3.3.8 to 4.17.1

    Bumps express from 3.3.8 to 4.17.1.

    Release notes

    Sourced from express's releases.

    4.17.1

    • Revert "Improve error message for null/undefined to res.status"

    4.17.0

    ... (truncated)
    Changelog

    Sourced from express's changelog.

    4.17.1 / 2019-05-25

    • Revert "Improve error message for null/undefined to res.status"

    4.17.0 / 2019-05-16

    ... (truncated)
    Commits
    Maintainer changes

    This version was pushed to npm by dougwilson, a new releaser for express since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Change hamburger to be an image so doesnt flash on page load

    Change hamburger to be an image so doesnt flash on page load

    Basically, my site caches properly and is a PWA so I like the feeling that the whole top bar doesn't even reload on a page, but my hamburger is, how can I change it to be an image or something that doesn't need to reload on page load?

    opened by kieron 0
Owner
Viljami Salminen
Leading Nord Design System team http://nordhealth.design • Author of various popular open source tools • Designer/Developer/Architect.
Viljami Salminen
Super tiny size multi-touch gestures library for the web.    You can touch this →

Preview You can touch this → http://alloyteam.github.io/AlloyFinger/ Install You can install it via npm: npm install alloyfinger Usage var af = new Al

腾讯 AlloyTeam 3.3k Dec 12, 2022
Navigation-Menu-Javascript - A simple Navbar navigation using vanilla javascript, to change links to the active link when clicked.

Navigation-Menu-Javascript A simple Navbar navigation using vanilla javascript, to change links to the active link when clicked. Desktop view Mobile v

Ellis 2 Feb 16, 2021
Responsive, CSS3, touch-enabled jQuery Coverflow plugin.

jQuery.Flipster Flipster is a CSS3 3D transform-based jQuery plugin built to replicate the familiar 'cover flow' effect, but also supports a variety o

Adrien Delessert 704 Dec 28, 2022
Canvas-based JavaScript UI element implementing touch, keyboard, mouse and scroll wheel support.

pure-knob Initially a (circular) knob / dial control with mouse, wheel, touch and keyboard support, implemented in pure JavaScript. In addition, this

Andre Plötze 44 Nov 4, 2022
Query for CSS brower support data, combined from caniuse and MDN, including version support started and global support percentages.

css-browser-support Query for CSS browser support data, combined from caniuse and MDN, including version support started and global support percentage

Stephanie Eckles 65 Nov 2, 2022
Responsive Tabs is a jQuery plugin that provides responsive tab functionality.

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

Jelle Kralt 537 Dec 8, 2022
NodeJS library without any external dependencies to check if free HTTP/SOCKS4/SOCKS5 proxies are working/up

free-proxy_checker NodeJS library WITHOUT any external dependencies to: download free proxies; check if free HTTP/SOCKS4/SOCKS5 proxies are working/up

antoine vastel 15 Nov 6, 2022
A jquery plugin that makes images truly responsive, without sacrificing anyone's face. Give it more stars!

Responsify.js A jquery plugin that makes images truly responsive, without sacrificing anyone's face :D When images are used in a responsive container

Wenting Zhang 1.3k Dec 14, 2022
A beautiful, responsive, highly customizable and accessible replacement for JavaScript's popup boxes. Zero dependencies.Alerts ,dialogs

AsgarAlert (v1) for JS Install <script defer src="/asgar-alert.js"></script> Examples The most basic message: asgar("Hello world!"); A message signali

Asgar Aliyev 5 Dec 20, 2022
Responsive no-jQuery pure JS/CSS Lightbox for images, no dependencies, 10kb unminified source code, with demo

img-lightbox Responsive no-jQuery pure JS/CSS Lightbox for images, no dependencies, 10kb unminified source code, with demo Demo codepen jsfiddle jsbin

englishextra 12 Jun 13, 2022
🍭 search-buddy ultra lightweight javascript plugin that can help you create instant search and/or facilitate navigation between pages.

?? search-buddy search-buddy is an open‑source ultra lightweight javascript plugin (* <1kb). It can help you create instant search and/or facilitate n

Michael 4 Jun 16, 2022
jQuery plugin to show a tabs bar for navigation. The tabs can be defined once, and shared across multiple HTML pages.

jquery.simpletabs v1.2.3 The jquery.simpletabs plugin shows a tabs bar for navigation. The tabs can be defined once, and shared across multiple HTML p

Peter Thoeny 1 Feb 23, 2022
A plugin for creating hierarchical navigation in Astro projects. Supports breadcrumbs too!

astro-navigation A plugin for creating hierarchical navigation in Astro projects. Supports breadcrumbs too! Full docs coming soon! Basic usage This pa

Tony Sullivan 7 Dec 19, 2022
Json-parser - A parser for json-objects without dependencies

Json Parser This is a experimental tool that I create for educational purposes, it's based in the jq works With this tool you can parse json-like stri

Gabriel Guerra 1 Jan 3, 2022
🖼 Simple file-upload utility that shows a preview of the uploaded image. Written in TypeScript. No dependencies. Works well with or without a framework.

file-upload-with-preview ?? Simple file-upload utility that shows a preview of the uploaded image. Written in TypeScript. No dependencies. Works well

John Datserakis 427 Dec 26, 2022
Simple scrollspy without jQuery, no dependencies

Simple Scrollspy Simple scrollspy is a lightweight javascript library without jQuery, no dependencies. It is used to make scrollspy effect for your me

Nguyen Huu Kim 57 Dec 13, 2022
Calculating Pi number without limitation until 10k digits or more in your browser powered by JS without any third party library!

PI Calculator Web JS (Online) Calculating Pi number without limitation until 10k digits or more in your browser powered by JS without any third party

Max Base 6 Jul 27, 2022
It's a tiny freeware library on TypeScript to sinhronize page scrolling and navigation meny-bar.

Scroll progress (dual-side-scroll) v1.2.3 Assignment This tiny plugin is designed to show the progress of the page scrolling interactively. There are

Evgeny 4 May 17, 2022
Touch enabled selectable plugin inspired by the jQuery UI widget.

Inspired by the jQuery UI Selectable plugin. Functionality and options are identical to the jQuery UI version with some additions and performance enha

Karl 135 Nov 24, 2022