Menu-aim NPM | npm.io

menu-aim

Instant mega menus in vanilla JavaScript.

Keeps a sub-menu open when the mouse is determined to be enroute to it, else instantly switches to another item in the menu
670 bytes gzipped

API

Editable demo (CodePen)

const menuAim = require('menu-aim')

menuAim(element , options)

element is a DOM element and optionsis an optional object literal.

Returns a “clean up” function for removing event listeners bound by the function to element and window.

element has the following HTML structure:

<ul class="menu-aim">
  <li class="menu-aim__item">
    <a class="menu-aim__item-name"><!-- ... --></a>
    <ul class="menu-aim__item-submenu"><!-- ... --></ul>
  </li>
  <!-- ... -->
</ul>

See the demo for the CSS styles required on element and the various nested elements.

Keys on options:

Key	Description	Default
`menuItemSelector`	Selector for each menu item.	`.menu-aim__item`
`menuItemActiveClassName`	Class name assigned to a menu item when it is active.	`menu-aim__item--active`
`menuItemSubMenuSelector`	Selector for the sub-menu element nested within each menu item.	`.menu-aim__item-submenu`
`delayingClassName`	Class name applied to `element` when some menu item is active and the mouse is determined to be enroute to the active submenu.	`menu-aim--delaying`