Author: | NickDJM |
---|---|
Views Total: | 523 views |
Official Page: | Go to website |
Last Update: | November 5, 2020 |
License: | MIT |
Preview:

Description:
An accessible, WCAG compliant, fully responsive, multi-level, and mobile-friendly responsive dropdown navbar component written in pure JavaScript.
How to use it:
1. Install and import the accessible-menu as an ES module.
# NPM $ npm install accessible-menu --save
import AccessibleMenu from 'accessible-menu';
2. Or include the UMD version of the component on the page as follows:
<!-- From Local --> <script src="/path/to/dist/accessibleMenu.min.js"></script> <!-- From A CDN --> <script src="https://cdn.jsdelivr.net/npm/accessible-menu/dist/accessibleMenu.min.js"></script>
3. The HTML structure to create a multi-level (up to two) dropdown menu with a hamburger toggle button for mobile view.
<header> <nav id="main-menu" aria-labelledby="main-menu-title"> <span id="main-menu-title" class="menu-title visually-hidden">Main</span> <span class="branding" aria-hidden="true">Accessible Menu</span> <button href="" class="menu-toggle">☰<span class="visually-hidden"> Toggle Menu</span></button> <ul class="menu"> <li class="menu-item"><a href="#" class="menu-link">Home</a></li> <li class="menu-item"><a href="#" class="menu-link">Contact</a></li> <li class="menu-item dropdown"> <a href="#" class="menu-link dropdown-toggle">JavaScript</a> <ul class="menu dropdown"> <li class="menu-item"><a href="#" class="menu-link">Vanilla</a></li> <li class="menu-item dropdown"> <a href="#" class="menu-link dropdown-toggle">Framework</a> <ul class="menu dropdown"> <li class="menu-item"><a href="#" class="menu-link">Angular</a></li> <li class="menu-item"><a href="#" class="menu-link">React</a></li> <li class="menu-item"><a href="#" target="_blank" class="menu-link">VueJS</a></li> </ul> </li> </ul> </li> <li class="menu-item"><a href="#" target="_blank" class="menu-link">Download</a></li> </ul> </nav> </header>
4. Initialize the dropdown menu.
const navs = document.querySelectorAll("nav"); const menuSettings = { menuItemSelector: ".menu-item", submenuItemSelector: ".menu-item.dropdown", submenuToggleSelector: ".dropdown-toggle", submenuSelector: ".menu.dropdown", openClass: "show" }; navs.forEach(nav => { const menuElement = nav.querySelector(".menu"); if (nav.id === "main-menu") { const controllerElement = nav.querySelector(".menu-toggle"); const menu = new AccessibleMenu({ menuElement, ...menuSettings, controllerElement, containerElement: nav }); } else { const menu = new AccessibleMenu({ menuElement, ...menuSettings }); } });
5. The example CSS for the dropdown menu.
nav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; background-color: #25585f; color: #fff; } nav a:focus, nav button:focus { outline: 0.2rem solid #f58a97; outline-offset: -0.2rem; } h1 { font-size: 2rem; line-height: 2.1rem; } #main-menu>.menu { display: none; flex-direction: column; } #main-menu>.menu.show { display: flex; } #main-menu>.menu-toggle { display: block; margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 2rem; padding: 0.5rem 2rem; } #main-menu>.branding { display: block; font-size: 1.5rem; padding: 0.5rem 2rem; } @media screen and (max-width: 1069px) { #main-menu>.menu { width: 100%; } } @media screen and (min-width: 1070px) { #main-menu>.menu { display: flex; flex-direction: row; } #main-menu>.menu-toggle { display: none; } } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .menu { display: flex; flex-direction: row; background-color: #25585f; list-style: none; padding: 0; margin: 0; } .menu.dropdown { display: none; flex-direction: column; } @media screen and (min-width: 1070px) { .menu.dropdown li.menu-item .menu.dropdown { top: 0; left: 100%; } } @media screen and (max-width: 1069px) { .menu .menu .menu-link { padding-left: 3rem; } .menu .menu .menu .menu-link { padding-left: 4rem; } } .menu .menu-link, .menu .menu-toggle { display: block; background-color: #25585f; color: #fff; text-decoration: none; border: none; padding: 1rem 2rem; } .menu .menu-link:hover, .menu .menu-toggle:hover { background-color: #0d464e; text-decoration-line: underline; text-decoration-color: #f58a97; text-decoration-thickness: 0.2rem; } .menu .menu-link:active { background-color: #f58a97; color: #000; } .menu .menu-item { position: relative; } .menu .menu-item.dropdown>.dropdown-toggle::after { content: "▼"; margin-left: 0.5rem; display: inline-block; } .menu .menu-item.show>.menu.dropdown { display: flex; } @media screen and (min-width: 1070px) { .menu .menu-item.show>.menu.dropdown { position: absolute; left: 0; } }
6. All possible parameters:
- menuElement: The menu element in the DOM.
- menuItemSelector: The selector string for menu items.
- submenuItemSelector: The selector string for submenu items.
- submenuToggleSelector: The selector string for submenu toggle triggers.
- submenuSelector: The selector string for the submenu itself.
- openClass: The class to use when a submenu is open.
- isTopLevel: A flag to mark the root menu.
- controllerElement: The element controlling the menu in the DOM.
- containerElement: The element containing the menu in the DOM.
- parentMenu: The menu containing this menu.
Changelog:
v2.1.1 (11/05/2020)
- Bug Fixes: accessibility: handle various scenarios causing inaccessible IDs
v2.1.0 (07/25/2020)
- fix(toggle): allow for multiple open/close classes in IE with loop
07/18/2020
- fix(events): make click handling a lot more strict
05/23/2020
- feat(menu): allow for multiple open and close classes
05/20/2020
- fix(ie): add string.prototype.startsWith polyfill
05/09/2020
- fix(events): use touchup and mouseup events instead of click
05/07/2020
- v2.0.0
I get the following error:
Uncaught TypeError: AccessibleMenu is not a constructor