Accessible Expanding Dropdown Menu In jQuery - accessible-menu.js
File Size: | 8.72 KB |
---|---|
Views Total: | 2397 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A fully accessible expanding dropdown menu plugin that enables a toggle button to control the visibility of a list of menu items with fade or slide animations.
Based on the WAI-ARIA Disclosure. Supports nested menu items.
Accessibility Features:
- ESC: Close the opened menu.
- Enter or Space: Toggle the menu.
- Home: Go to the first item.
- End: Go to the last item.
- Tab: Move focus between items.
- Home: Go to the first item.
- Arrow keys: Switch between items.
How to use it:
1. Create an HTML list for the accessible dropdown menu.
<ul id="example"> <li> <a href="#">Item 1.1</a> </li> <li> <a href="#">Item 1.2</a> </li> <li> <a href="#">Item 1.3</a> </li> </ul>
2. Create a Disclosure button to toggle the dropdown menu. The aria-expanded
is used to specify the initia state of the dropdown menu.
<button aria-expanded="false" aria-controls="example"> Toggle </button>
3. The plugin also supports multi-level dropdown menu using nested HTML lists as follows:
<ul id="example"> <button aria-expanded="false" aria-controls="menu1-1"> Item 1.1 </button> <ul id="menu-1-1"> <li> <a href="#">Item 1.1.1</a> </li> <li> <a href="#">Item 1.1.2</a> </li> <li> <a href="#">Item 1.2.3</a> </li> </ul> </li> <li> <a href="#">Item 1.2</a> </li> <li> <button aria-expanded="false" aria-controls="menu-1-3"> Item 1.3 </button> <ul id="submenu-1-3"> <li> <a href="#">Item 1.3.1</a> </li> <li> <a href="#">Item 1.3.2</a> </li> </ul> </li> </ul>
4. Load both jQuery library and the jQuery accessible-menu.js plugin at the end of the document.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/accessible-menu.js"></script>
5. Call the function on the top list and the plugin will take care of the rest.
$("#example").accessibleMenu();
6. Apply a smooth transition effect to the accessible dropdown menu when toggled.
$("#example").accessibleMenu({ animation: 'slide' // or 'fade' });
7. Config the animation speed. Default: 'fast'.
$("#example").accessibleMenu({ animation: 'slide' // or 'fade' animationSpeed: 'fast' });
This awesome jQuery plugin is developed by hotgeart. For more Advanced Usages, please check the demo page or visit the official website.