Menu dropdown aim

  

``
A simple menu like be Amazone's menu
Post: https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
`

Live Demo

Installation

![NPM](https://nodei.co/npm/mega-menu-aim/)

#### To install the latest stable version:

`js
npm install --save mega-menu-aim
// or
yarn add mega-menu-aim
`

#### Basic usage:

`css
.menu-aim {
max-width: 200px;
position: relative;
height: 200px;
}

.menu-aim__item {
background-color: gray;
}

.menu-aim a {
display: block;
color: blue;
}

.menu-aim__item:hover {
color: white;
background-color: rgba(0, 0, 255, 0.473);
}

.menu-aim__item--active {
background-color: blue !important;
}

.menu-aim__item--active > a {
color: white !important;
}

.menu-aim__item-submenu {
display: none;
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 200px;
background-color: antiquewhite;
}

.menu-aim__item--active .menu-aim__item-submenu {
display: block;
}
`

`html


• 
  foo
  
  
  
  • fooo
  
  
  • foooo
  
  
  • fooooo
  
  
  • foooooo
  
  
  • fooooooo
  
  
  • foooooooo
  
  
  
  


• 
  bar
  
  
  
  • baar
  
  
  • baaar
  
  
  • baaaar
  
  
  • baaaaar
  
  
  • baaaaaar
  
  
  • baaaaaaar
  
  
  
  


• 
  baz
  
  
  
  • baaz
  
  
  • baaaz
  
  
  • baaaaz
  
  
  • baaaaaz
  
  
  • baaaaaaz
  
  
  • baaaaaaaz
  
  
  • baaaaaaaaz
  
  
  
  


`

`ts
function MenuAim(options: {
menuSelector: string;
classItem: string;
classItemActive: string;
classPopup: string;
classPopupActive: string;
delay?: number;
submenuDirection?: 'top' | 'left' | 'bottom' | 'right';
tolerance?: number;
}): void;

MenuAim({
submenuDirection: 'right',
menuSelector: '.menu-aim',
delay: 350,
tolerance: 30,
classItem: '.menu-aim__item',
classItemActive: 'menu-aim__item--active',
classPopup: '.menu-aim__item-submenu',
classPopupActive: 'menu-aim__item-submenu--active',
});
``