clicky-menus
Advanced tools
Simple click-triggered navigation submenus. Accessible and progressively enhanced.
Version 1.5.2
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 supports hover and keyboard navigation when 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".
[!TIP] Did this save you an hour? Did this save you four hours? Consider sponsoring my work on the project!
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.
You can install Clicky Menus by copying and pasting the files into your project. You can also use git or npm.
With git:
$ git clone https://github.com/mrwweb/clicky-menus.git
With npm:
$ npm install clicky-menus
Once you have the files:
clicky-menus.js anywhere in the DOM and clicky-menus.css in the <head>.clicky-menu and no-js classes on the top-level <ul> element containing your menuclicky-menus.css provides the most minimal styles for menu functionality so you can customize the design to your liking. See the demo for one example of how you could style this, including submenu animations!Most of the time, Clicky Menus requires no configuration!
If you have unusual markup or design requirements, you can set a custom selector to target submenu elements. Do this by adding a data-clicky-submenu-selector attribute on the top-level <ul> element (the same one with the clicky-menu class) that contains a valid CSS selector.
For example, if you only want to only 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).
Where my-menu is the ID of the menu you want to close and is the element with the clicky-menu class:
<button data-clicky-menus-close="my-menu">Close Open Submenus</button>
<button id="close-open-submenus">Close Open Submenus</button>
// select the menu to manipulate
const myMenu = document.getElementById('my-menu');
// the 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"><!-- menu parent 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.
<head>ESC key event handler to fire on keydown instead of keyup and use .preventDefault() instead of .stopPropogation() when focus is inside a submenu or parent of open submenu. This will prevent the ESC key from closing dialog elements when a clicky-menu is inside one.data-clicky-menus-close attribute on any element to automatically close the open submenu. It should be set to the ID of the element with the clicky-menu class. Fixes #21.ESC propogate when pressed on an item inside a submenu. This should generally prevent dialogs and other toggle features from closing when they contain a menu. Fixes #22-1) to the end of each ID to get much closer to guaranteeing it is unique. Fixes #12clickyMenusClose eventFAQs
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 researchers discovered nine malicious NuGet packages that use time-delayed payloads to crash applications and corrupt industrial control systems.
Security News
Socket CTO Ahmad Nassri discusses why supply chain attacks now target developer machines and what AI means for the future of enterprise security.
Security News
Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.