clicky-menus
Advanced tools
Simple click-triggered navigation submenus. Accessible and progressively enhanced.
Version 1.2.0
Jump to: About, Features, Setup & Configuration, Browser Support Changelog
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.
Why should you want menus that work this way? Read the accompanying article on CSS Tricks, "In Praise of the Unambiguous Click Menu".
aria-expanded, aria-controls and aria-hidden supportESC keyThis script only supports a single level of submenus, i.e., there are no "sub-sub-menus" or "tertiary menus". This is intentional because:
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!
Clicky menus requires one JS file, one CSS file, and a list with the class clicky-menu. Most of the time, Clicky Menus requires no configuration!
clicky-menus.js anywhere in the DOM and clicky-menus.css in the <head>.clicky-menu class on the top-level <ul> element containing your menuIf you have unusual markup or design requirements, you can set a custom selector for the submenu element with a data-clicky-submenu-selector attribute on the top-level <ul> element (the same one with the clicky-menu class).
For example, if you only want to select the first level of nested <ul> elements while building a megamenu, you would do:
<ul class="clicky-menu" data-clicky-submenu-selector=".clicky-menu > li > ul">
<!-- menu items -->
</ul>
There are a variety of situations where you might want to force submenus to close based on interactions elsewhere on the page. For example, maybe an adjacent search toggle overlaps with submenus when expanded.
To close all open submenus, dispatch the custom event clickyMenusClose to the .clicky-menu DOM node (usually the <ul> containing menu items).
Example:
<button id="close-open-submenus">Close Open Submenus</button>
// select the menu to manipulate
const myMenu = document.getElementById('my-menu');
// an element that triggers the close event
const closeButton = document.getElementById('close-open-submenus');
// dispatch the custom event when clicking the button
closeButton.addEventListener( 'click', () => { myMenu.dispatchEvent( new Event( 'clickyMenusClose' ) } );
<nav id="primary-nav"> <!-- element must have an ID -->
<ul class="clicky-menu no-js">
<li>
<a href="#" class="a-custom-class">Parent Menu Item 1</a>
<ul>
<li><a href="page-1a.html">Submenu Item 1a</a></li>
<li><a href="page-1b.html">Submenu Item 1b</a></li>
<li><a href="page-1c.html">Submenu Item 1c</a></li>
</ul>
</li>
<--! etc… -->
</ul>
</nav>
Once the script runs, the markup is changed to:
<nav id="primary-nav"> <!-- element must have an ID -->
<ul class="clicky-menu no-js">
<li>
<button aria-expanded="false" aria-controls="parent-menu-item-1-submenu" class="a-custom-class">Parent Menu Item 1</button>
<ul id="parent-menu-item-1-submenu" aria-hidden="true">
<li><a href="page-1a.html">Submenu Item 1a</a></li>
<li><a href="page-1b.html">Submenu Item 1b</a></li>
<li><a href="page-1c.html">Submenu Item 1c</a></li>
</ul>
</li>
<--! etc… -->
</ul>
</nav>
href.aria-expanded and aria-hidden are appropriately toggled between true and false.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.
clickyMenusClose eventFAQs
Simple click-triggered navigation submenus. Accessible and progressively enhanced.
The npm package clicky-menus receives a total of 3 weekly downloads. As such, clicky-menus popularity was classified as not popular.
We found that clicky-menus demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.