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.
If you are on “main” navigation:
If you are on a “sub”-navigation link:
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! ;)
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.
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.
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”. ;)
It is lightweight: 11kb(development), 4.7kb (minified), only 700 bytes minified and gzipped.
This plugin has been used for example on Vision Laser or on Office of the High Commissioner for Human Rights.
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.
--- _Source: https://npm.io/package/jquery-accessible-subnav-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._