Author: | github |
---|---|
Views Total: | 531 views |
Official Page: | Go to website |
Last Update: | February 25, 2019 |
License: | MIT |
Preview:

Description:
A pure JavaScript library used to create accessible disclosure toggle menus using HTML Details element.
Works with modern browsers which support Custom Element.
How to use it:
Install & download.
# NPM $ npm install $ npm install @github/details-menu-element --save
Load the umd version of the details-menu-element in the document.
<script type="text/javascript" src="https://unpkg.com/@github/details-menu-element@latest"></script>
Create a basic toggle menu from a details
element. In this example, the toggle menu will auto update the summary
data using the data-menu-button
and data-menu-button-text
attributes:
<details> <summary>JavaScript: <span data-menu-button>Frameworks</span></summary> <details-menu> <ul> <li><button type="button" role="menuitem" data-menu-button-text>Angular</button></li> <li><button type="button" role="menuitem" data-menu-button-text>React</button></li> <li><button type="button" role="menuitem" data-menu-button-text>Vue.js</button></li> </ul> </details-menu> </details>
Radio & checkbox inputs are supported as well.
<details> <summary>JavaScript: <span data-menu-button>Frameworks</span></summary> <details-menu> <ul> <li><label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> Angular</label></li> <li><label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> React</label></li> <li><label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> Vue.js</label></li> </ul> </details-menu> </details> <details> <summary>JavaScript:</summary> <details-menu> <ul> <li><label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> Angular</label></li> <li><label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> React</label></li> <li><label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> Vue.js</label></li> </ul> </details-menu> </details>
Event handlers.
// when a menu item is selected document.addEventListener('details-menu-selected', e => console.log(e)) // when a menu item is to be select document.addEventListener('details-menu-select', e => console.log(e))