jquery-accessible-subnav-dropdown
jquery-accessible-subnav-dropdown copied to clipboard
This jQuery plugin simply enhances keyboard navigation on a “classic” drop-down menu.
jQuery accessible keyboard-enhanced dropdown navigation
This jQuery plugin enhances (a lot) keyboard navigation on a “classic” drop-down menu.
You can see a working demo here: http://a11y.nicolas-hoffmann.net/subnav-dropdown/
Accessible?
What does it do?
This script adds listeners to keyboard and mouse to make a keyboard-friendly dropdown navigation system (using arrows and Esc). You can still use Tab if you prefer, it doesn’t affect this natural behaviour.
Keys
If you are on “main” navigation:
- use Left/Right to see previous/next link
- if you are on the first one, using Left will bring you to last one (same for last one and right
- if the element has a sub-navigation, you will focus the first sub-element
If you are on a “sub”-navigation link:
- use Up/Down to navigate through “sub”-navigation links
- using Up/Down will trap you into “sub”-navigation links, for example, if you use Down on the last sub-element, the focus will be set to the first sub-element
- use Left/Right to go to previous/next “sub”-navigation, if it exists, it will to the first sub-element, if not, it will go to previous/next navigation element
- use Esc to close the sub-navigation, it will also give the focus back to parent navigation element
How to
How it works
The script detects a mouse enter in a navigation element and shows its sub-navigation. Of course, the sub-navigation will be visible as long as the mouse is in the navigation element.
It will add an attribute data-show-sub
to the navigation items (to indicate if the element is opened or not), and an attribute data-visually-hidden
on sub-navigation (to indicate if the sub-navigation is visible or not).
And of course: it also adds some keyboard listeners to enable a cool keyboard navigation using Left/Right,Up/Down arrows (and also Esc). Try it on the top menu, you will surely appreciate! ;)
How to use it
Just follow these conventions by using js-nav-system
, js-nav-system__item
, js-nav-system__link
, js-nav-system__subnav
, js-nav-system__subnav__item
, js-nav-system__subnav__link
:
<ul class="js-nav-system">
<li class="js-nav-system__item">
<a href="…" class="js-nav-system__link">Link</a>
</li>
<li class="js-nav-system__item">
<a href="…" class="js-nav-system__link">Link 2</a>
<ul class="js-nav-system__subnav">
<li class="js-nav-system__subnav__item">
<a href="…" class="js-nav-system__subnav__link">Sub Link 1</a>
</li>
<li class="js-nav-system__subnav__item">
<a href="…" class="js-nav-system__subnav__link">Sub Link 2</a>
</li>
</ul>
</li>
<!-- etc. -->
<li class="js-nav-system__item">
<a href="…" class="js-nav-system__link">Link x</a>
<ul class="js-nav-system__subnav">
<li class="js-nav-system__subnav__item">
<a href="…" class="js-nav-system__subnav__link">Sub Link x</a>
</li>
<li class="js-nav-system__subnav__item">
<a href="…" class="js-nav-system__subnav__link">Sub Link x+1</a>
</li>
<li class="js-nav-system__subnav__item">
<a href="…" class="js-nav-system__subnav__link">Sub Link x+1</a>
</li>
</ul>
</li>
</ul>
Of course it is supposed to work on ul li a
tags, but it can work on other elements (like form inputs) if the structure is kept.
For styles, here are minimal styles needed:
.subnav {
position: absolute;
}
[data-visually-hidden="true"] {
display: none;
}
[data-visually-hidden="false"] {
display: block;
}
The plugin will do the rest. Yes, just for you.
Other informations
Last news
9th of April 2016: fixed and enhanced keyboard management in subnavs, thanks again to @jbcordina.
27th of March 2016: fixed two bugs in keyboard management, thanks to @jbcordina.
7th of February 2016: this plugin is available on NPMjs.com, and you can install it with npm i jquery-accessible-subnav-dropdown
.
License
No license problem, it uses MIT license, so it’s free, open-source and you can do whatever you want with it, including commercial use. This permission notice shall be included in all copies or substantial portions of it.
However, it is not prohibited to tell me that you’ve used it, or send me a little “thank you”. ;)
Weight
It is lightweight: 11kb(development), 4.7kb (minified), only 700 bytes minified and gzipped.
Used by
This plugin has been used for example on Vision Laser or on Office of the High Commissioner for Human Rights.
Tribute
The idea of this script is inspired by Heydon’s simple dropdowns example. Seriously, you should have a look at his great work in accessibility.