Skip to content

yuanqing/menu-aim

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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