menu-aim

Instant mega menus in vanilla JavaScript.

Usage no npm install needed!

<script type="module">
  import menuAim from 'https://cdn.skypack.dev/menu-aim';
</script>

README

menu-aim npm Version Build Status

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

License

MIT