clicky-menus
clicky-menus copied to clipboard
Published
20 hours ago •
mrwweb
mrwweb
Simple click-triggered navigation submenus. Accessible and progressively enhanced.
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
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 click-menus.js anywhere in the DOM and clicky-menus.css in the <head>.
Changelog
1.0.0
- It's alive!
mrwweb