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.
\r\n \r\nIf you are on “main” navigation:
\r\n \r\nIf you are on a “sub”-navigation link:
\r\n\r\nThe 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.
\r\n \r\nIt 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! ;)
\r\n \r\nJust 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\">\r\n\r\n <li class=\"js-nav-system__item\">\r\n <a href=\"…\" class=\"js-nav-system__link\">Link</a>\r\n </li>\r\n\r\n <li class=\"js-nav-system__item\">\r\n <a href=\"…\" class=\"js-nav-system__link\">Link 2</a>\r\n <ul class=\"js-nav-system__subnav\">\r\n <li class=\"js-nav-system__subnav__item\">\r\n <a href=\"…\" class=\"js-nav-system__subnav__link\">Sub Link 1</a>\r\n </li>\r\n <li class=\"js-nav-system__subnav__item\">\r\n <a href=\"…\" class=\"js-nav-system__subnav__link\">Sub Link 2</a>\r\n </li>\r\n </ul>\r\n </li>\r\n\r\n <!-- etc. -->\r\n\r\n <li class=\"js-nav-system__item\">\r\n <a href=\"…\" class=\"js-nav-system__link\">Link x</a>\r\n <ul class=\"js-nav-system__subnav\">\r\n <li class=\"js-nav-system__subnav__item\">\r\n <a href=\"…\" class=\"js-nav-system__subnav__link\">Sub Link x</a>\r\n </li>\r\n <li class=\"js-nav-system__subnav__item\">\r\n <a href=\"…\" class=\"js-nav-system__subnav__link\">Sub Link x+1</a>\r\n </li>\r\n <li class=\"js-nav-system__subnav__item\">\r\n <a href=\"…\" class=\"js-nav-system__subnav__link\">Sub Link x+1</a>\r\n </li>\r\n </ul>\r\n </li>\t \r\n\r\n </ul>\r\nOf 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:
\r\n \r\n.subnav {\r\n position: absolute;\r\n}\r\n\r\n[data-visually-hidden=\"true\"] {\r\n display: none;\r\n}\r\n[data-visually-hidden=\"false\"] {\r\n display: block;\r\n}\r\nThe plugin will do the rest. Yes, just for you.
\r\n \r\n9th of April 2016: fixed and enhanced keyboard management in subnavs, thanks again to @jbcordina.
\r\n \r\n27th of March 2016: fixed two bugs in keyboard management, thanks to @jbcordina.
\r\n \r\n\r\n7th 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.
\r\nHowever, it is not prohibited to tell me that you’ve used it, or send me a little “thank you”. ;)
\r\n \r\nIt is lightweight: 11kb(development), 4.7kb (minified), only 700 bytes minified and gzipped.
\r\n \r\nThis plugin has been used for example on Vision Laser or on Office of the High Commissioner for Human Rights.
\r\n\r\nThe idea of this script is inspired by Heydon’s simple dropdowns example. Seriously, you should have a look at his great work in accessibility.
\r\n \r\n","maintainers":[{"name":"nico3333fr","email":"dante3333@gmail.com"}],"time":{"modified":"2022-06-19T04:57:07.209Z","created":"2016-02-07T10:45:57.571Z","1.0.1":"2016-02-07T10:45:57.571Z","1.0.2":"2016-02-07T10:58:10.695Z","1.1.0":"2016-03-27T08:34:54.080Z","1.2.0":"2016-04-09T13:27:42.113Z","1.2.1":"2017-07-27T10:32:35.683Z"},"homepage":"http://a11y.nicolas-hoffmann.net/subnav-dropdown/","keywords":["Accessibility","jQueryPlugin","subnav","dropdown","a11y"],"repository":{"type":"git","url":"git+https://github.com/nico3333fr/jquery-accessible-subnav-dropdown.git"},"bugs":{"url":"https://github.com/nico3333fr/jquery-accessible-subnav-dropdown/issues"},"readmeFilename":"README.md"}