Author: | mrwweb |
---|---|
Views Total: | 1,067 views |
Official Page: | Go to website |
Last Update: | November 8, 2022 |
License: | MIT |
Preview:

Description:
Clicky Menus is a fast, responsive, progressive enhancement, touch support, fully accessible dropdown menu for the web.
Features:
- Converts the dropdown into an accordion menu in mobile view.
- Automatically prevents offscreen submenu.
- Navigates between menu items with Tab.
- Allows to sub-menus with click, touch tap, and Enter/Space key.
- Allows to close sub-menus with ESC key.
How to use it:
1. Import the Clicky Menus into the HTML.
<link rel="stylesheet" href="./clicky-menus.css" /> <script src="./clicky-menus.js"></script>
2. Create a dropdown menu from a nested nav list as follows. That’s it.
<!-- for use with <use> --> <svg xmlns="http://www.w3.org/2000/svg" hidden> <symbol id="arrow" viewbox="0 0 16 16" > <polyline points="4 6, 8 10, 12 6" stroke="#000" stroke-width="2" fill="transparent" stroke-linecap="round" /> </symbol> </svg> <!-- In the real world, all hrefs would have go to real, unique URLs, not a "#" --> <nav id="site-navigation" class="site-navigation" aria-label="Clickable Menu Demonstration"> <ul class="main-menu clicky-menu no-js"> <li> <a href="#">Home</a> </li> <li> <a href="#"> Category <svg aria-hidden="true" width="16" height="16"> <use xlink:href="#arrow" /> </svg> </a> <ul> <li><a href="#">Accordion</a></li> <li><a href="#">Carousel</a></li> <li><a href="#">Dropdown</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Navigation</a></li> </ul> </li> <li> <a href="#"> Social <svg aria-hidden="true" width="16" height="16"> <use xlink:href="#arrow" /> </svg> </a> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Linkedin</a></li> <li><a href="#">Instagram</a></li> </ul> </li> <li> <a href="#"> About <svg aria-hidden="true" width="16" height="16"> <use xlink:href="#arrow" /> </svg> </a> <ul> <li><a href="#">About</a></li> <li><a href="#">Policy</a></li> <li><a href="#">Contact</a></li> </ul> </li> </ul> </nav>
Changelog:
11/08/2022
- Add iterator to menu init. Use iterator to give menu parent a unique ID if it doesn’t have one and fix bug where submenus toggle for all items where the parent item has the same text