option menus

Harris Schneiderman edited this page Jun 9, 2017 · 1 revision

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>
  <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>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.