Accessible Expanding Dropdown Menu In jQuery - accessible-menu.js

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.