option menus

Option Menus

What is needed?

To properly use the option menus, the following is needed:

• A wrapper element with the "dqpl-options-menu-wrap" class. Within the wrapper there are 2 necessary elements: the trigger and the menu...
  • The button which triggers the options menu needs the "dqpl-options-menu-trigger" class as well as the font awesome icon (<div class="fa fa-ellipsis-v" aria-hidden="true"></div>). The button also needs the following attributes:
    • aria-label which describes the purpose of the options menu
    • aria-controls pointing the the id of the menu
    • aria-expanded="false"
  • The menu needs to be a <ul /> with the "dqpl-options-menu" class as well as the following attributes:
    • role="menu"
    • aria-expanded="false"
  • Within the menu is where the menuitems will live. They need the following:
    • the "dqpl-options-menuitem" class
    • role="menu" attribute
    • tabindex="-1"
    • If the menuitem has a child link, the link needs tabindex="-1" as well. The child links will be properly clicked when the menuitem is clicked.

Example HTML

<div class="dqpl-options-menu-wrap dqpl-align-left">
  <button class="dqpl-options-menu-trigger" type="button" aria-controls="options-menu-1" aria-label="Additional Options" aria-expanded="false">
    <div class="fa fa-ellipsis-v" aria-hidden="true"></div>
  </button>
  <ul class="dqpl-options-menu" id="options-menu-1" role="menu" aria-expanded="false">
    <li class="dqpl-options-menuitem" role="menuitem" tabindex="-1">Action 1</li>
    <li class="dqpl-options-menuitem" role="menuitem" aria-disabled="true" tabindex="-1">Action 2</li>
    <li class="dqpl-options-menuitem" role="menuitem" tabindex="-1">Action 3</li>
    <li class="dqpl-options-menuitem" role="menuitem" tabindex="-1">Action 4</li>
    <li class="dqpl-options-menuitem" role="menuitem" tabindex="-1">Action 5</li>
  </ul>
</div>