• Keyboard navigation
• Proper mouse navigation with delays for a smoother experience

Required markup

<div class="if" style="position:relative;">
  <button class="if js-dropdown-menu-controller">A menu toggler</button>
  <nav class="if dropdown-menu">
    <ul class="if">
      <li class="if">…</li>
      …
    </ul>
  </nav>
</div>

Init

import { IDSMenuToggle } from '@ids-js/dropdown-menu';

const menuToggleButtons = document.querySelectorAll(
  '.js-dropdown-menu-controller'
);

menuToggleButtons.forEach((menuToggleButton) => {
  new MenuToggle(menuToggleButton);
});

Classes

Menu SubMenu MenuToggle

Menu

Kind: global class

• Menu
  • new Menu(menuItemHolder, controllerNode, topMostParent)
  • .IS_OPEN_TOGGLE_CLASS : String
  • .IS_ACTIVE_TOGGLE_CLASS : String
  • .SUB_MENU_MOUSEOVER_TOLERANCE : Number
  • .MOUSE_LOCS_TRACKED : Number
  • .DELAY : Number
  • .menuItemHolder : Element
  • .menuItemList : Element
  • .controllerNode : Element
  • .indexOfMenuItemStartingWithChar : Object.<string, number>
  • .subMenuIndexItems : Object.<string, SubMenu>
  • .menuItems : Array.<Element>
  • .isOpen : Boolean
  • .logMouseMovement(e)
  • .activate(menuItem, subMenuIndex)
  • .handleMouseEnterMenuItem(e, index)
  • .handleMouseLeave()
  • .possiblyActivate(menuItem, subMenuIndex)
  • .focusFirstItem()
  • .focusLastItem()
  • .focusNextItem()
  • .focusPreviousItem()
  • .activationDelay(menuItem)
  • .openMenu()
  • .closeMenu()
  • .keyDownHandler(event)

new Menu(menuItemHolder, controllerNode, topMostParent)

menu.IS_OPEN_TOGGLE_CLASS : String

Kind: instance property of Menu

menu.IS_ACTIVE_TOGGLE_CLASS : String

Kind: instance property of Menu

menu.SUB_MENU_MOUSEOVER_TOLERANCE : Number

Kind: instance property of Menu

menu.MOUSE_LOCS_TRACKED : Number

Kind: instance property of Menu

menu.DELAY : Number

Kind: instance property of Menu

menu.menuItemHolder : Element

Kind: instance property of Menu

menu.menuItemList : Element

Kind: instance property of Menu

menu.controllerNode : Element

Kind: instance property of Menu

menu.indexOfMenuItemStartingWithChar : Object.<string, number>

Kind: instance property of Menu

menu.subMenuIndexItems : Object.<string, SubMenu>

Kind: instance property of Menu

menu.menuItems : Array.<Element>

Kind: instance property of Menu

menu.isOpen : Boolean

Kind: instance property of Menu

menu.logMouseMovement(e)

Kind: instance method of Menu description: Keep track of the last few locations of the mouse.

menu.activate(menuItem, subMenuIndex)

Kind: instance method of Menu description: Activate a menu row.

menu.handleMouseEnterMenuItem(e, index)

Trigger a possible row activation whenever entering a new row.

Kind: instance method of Menu

menu.handleMouseLeave()

Cancel possible menu activations when leaving the menu entirely

Kind: instance method of Menu

menu.possiblyActivate(menuItem, subMenuIndex)

Possibly activate a submenu. If mouse movement indicates that we shouldn't activate yet because user may be trying to enter a submenu's content, then delay and check again later.

Kind: instance method of Menu

menu.focusFirstItem()

Put focus on the first item in current menu

Kind: instance method of Menu

menu.focusLastItem()

Put focus on the last item in current menu

Kind: instance method of Menu

menu.focusNextItem()

Put focus on the next item of currently focused menu item if at the end of list, cycle back to first item

Kind: instance method of Menu

menu.focusPreviousItem()

Put focus on the previous item of currently focused menu item if at the start of list, cycle back to last item

Kind: instance method of Menu

menu.activationDelay(menuItem)

Kind: instance method of Menu

description: Return the amount of time that should be used as a delay before the currently hovered item is activated.

Returns 0 if the activation should happen immediately. Otherwise, returns the number of milliseconds that should be delayed before checking again to see if the item should be activated.

menu.openMenu()

Open menu

Kind: instance method of Menu

menu.closeMenu()

Close menu

Kind: instance method of Menu

menu.keyDownHandler(event)

Kind: instance method of Menu

SubMenu

Kind: global class

• SubMenu
  • new SubMenu(subMenuHolder, topMostParent)
  • .menuItems : Menu
  • .openSubMenu()
  • .closeSubMenu()
  • .focusFirstSubMenuItem()
  • .focusLastSubMenuItem()

new SubMenu(subMenuHolder, topMostParent)

subMenu.menuItems : Menu

Kind: instance property of SubMenu

subMenu.openSubMenu()

Allows to control opening of submenu from outside

Kind: instance method of SubMenu

subMenu.closeSubMenu()

Allows to control closing of submenu from outside

Kind: instance method of SubMenu

subMenu.focusFirstSubMenuItem()

Sets focus on the first item of submenu

Kind: instance method of SubMenu

subMenu.focusLastSubMenuItem()

Sets focus on last item of submenu

Kind: instance method of SubMenu

MenuToggle

Kind: global class

• MenuToggle
  • new MenuToggle(menuButton)
  • .handleKeydown(event)

new MenuToggle(menuButton)

menuToggle.handleKeydown(event)

Kind: instance method of MenuToggle