menu-aim

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

Installation

Install via yarn:

$ yarn add menu-aim

Or npm:

$ npm install --save menu-aim

Prior art

• jQuery-menu-aim

License

MIT