Clicky Menus!
A project by Mark Root-Wiley, MRW Web Design
Clicky Menus lets you create a progressively-enhanced, accessible one-level dropdown menu that opens when activated by click, touch, or ENTER/SPACE. The menu is progressively enhanced, supporting hover and keyboard navigation (in modern browsers) if JS is not enabled.
Basic Features
- Supports mouse, touch, and keyboard interactions
- Turns parent items from links into buttons
aria-expanded,aria-controlsandaria-hiddensupport- Close open submenu with
ESCkey - Close open submenu with click outside of open menu
- Basic offscreen-menu prevention
Why only one level of submenu?
This script only supports a single level of submenus, i.e., there are no "sub-sub-menus" or "tertiary menus". This is intentional because:
- I don't like them personally and think of them as a bit of a "navigation smell"—a la "code smell".
- This makes it very easy to make "mega menus" that can contain nested lists (basically permanently visible tertiary menus).
If you really want this feature, there's an open issue for sharing use cases. If you want to submit a pull request, please coordinate on that issue before doing any work!
Browser Support
All Modern Browsers such as Firefox, Chrome, Edge, and Safari.
Internet Explorer 11 support is possible if you include polyfills for closest and NodeList.forEach and transpile your code with something like Babel.
Expected Markup
<nav id="primary-nav"> <!-- element must have an ID -->
<ul class="clicky-menu no-js">
<li>
<a href="#">Menu Item 1</a>
<ul>
<li><a href="page-1a.html">Menu Item 1a</a></li>
<li><a href="page-1b.html">Menu Item 1b</a></li>
<li><a href="page-1c.html">Menu Item 1c</a></li>
</ul>
</li>
<--! etc… -->
</ul>
</nav>Setup
Include clicky-menus.js anywhere in the DOM and clicky-menus.css in the <head>.
Changelog
1.0.0
- It's alive!