Back to Dropdown Menu-guidelines

JavaScriptThe latest version of this package is: 0.17.4, Opens in new window

JavaScript library for the FAQ Component

This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-js/dropdown-menu@0.17.4

Table of Contents

Features

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

Usage

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);
});

Api

Classes

Menu SubMenu MenuToggle

Kind: global class

new Menu(menuItemHolder, controllerNode, topMostParent)

Param Type
menuItemHolder Element
controllerNode Element
topMostParent MenuToggle

Kind: instance property of Menu

Kind: instance property of Menu

Kind: instance property of Menu

Kind: instance property of Menu

Kind: instance property of Menu

Kind: instance property of Menu

Kind: instance property of Menu

Kind: instance property of Menu

Kind: instance property of Menu

Kind: instance property of Menu

Kind: instance property of Menu

Kind: instance property of Menu

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

Param Type
e MouseEvent

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

Param Type Description
menuItem Element the menu item to activate the subMenu from
subMenuIndex Number The index of the subMenu to use

Trigger a possible row activation whenever entering a new row.

Kind: instance method of Menu

Param Type Description
e MouseEvent
index number The index of the current subMenu

Cancel possible menu activations when leaving the menu entirely

Kind: instance method of Menu

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

Param Type Description
menuItem Element the menu item to activate the subMenu from
subMenuIndex Number The index of the subMenu to use

Put focus on the first item in current menu

Kind: instance method of Menu

Put focus on the last item in current menu

Kind: instance method of Menu

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

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

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.

Param Type Description
menuItem Element the menu item to activate the subMenu from

Open menu

Kind: instance method of Menu

Close menu

Kind: instance method of Menu

Kind: instance method of Menu

Param Type
event KeyboardEvent

Kind: global class

new SubMenu(subMenuHolder, topMostParent)

Param Type
subMenuHolder Element
topMostParent MenuToggle

Kind: instance property of SubMenu

Allows to control opening of submenu from outside

Kind: instance method of SubMenu

Allows to control closing of submenu from outside

Kind: instance method of SubMenu

Sets focus on the first item of submenu

Kind: instance method of SubMenu

Sets focus on last item of submenu

Kind: instance method of SubMenu

Kind: global class

new MenuToggle(menuButton)

Param Type Description
menuButton Element an item (usually) in Header, which toggles the appearance of Menu

Kind: instance method of MenuToggle

Param Type
event KeyboardEvent
Contact us, Opens in new window