jquery-accessible-subnav-dropdown v1.2.1

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/

<li class="js-nav-systemitem"> <a href="…" class="js-nav-systemlink">Link</a> </li>

<li class="js-nav-systemitem"> <a href="…" class="js-nav-systemlink">Link 2</a> <ul class="js-nav-systemsubnav"> <li class="js-nav-systemsubnavitem"> <a href="…" class="js-nav-systemsubnavlink">Sub Link 1</a> </li> <li class="js-nav-systemsubnavitem"> <a href="…" class="js-nav-systemsubnav__link">Sub Link 2</a> </li> </ul> </li>

<!-- etc. -->

<li class="js-nav-systemitem"> <a href="…" class="js-nav-systemlink">Link x</a> <ul class="js-nav-systemsubnav"> <li class="js-nav-systemsubnavitem"> <a href="…" class="js-nav-systemsubnavlink">Sub Link x</a> </li> <li class="js-nav-systemsubnavitem"> <a href="…" class="js-nav-systemsubnavlink">Sub Link x+1</a> </li> <li class="js-nav-systemsubnavitem"> <a href="…" class="js-nav-systemsubnav__link">Sub Link x+1</a> </li> </ul> </li>

</ul>

data-visually-hidden="true" { display: none; } data-visually-hidden="false" { display: block; }