Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hunghg255/menu-mega-aim
https://github.com/hunghg255/menu-mega-aim
npm
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hunghg255/menu-mega-aim
- Owner: hunghg255
- Created: 2022-11-15T10:41:41.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-03T11:56:35.000Z (8 months ago)
- Last Synced: 2024-11-12T23:44:36.376Z (about 2 months ago)
- Topics: npm
- Language: JavaScript
- Homepage: https://hunghg255.github.io/menu-mega-aim/demo/index.html
- Size: 171 KB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A library menu mega like Amazon, Ebay
```
A simple menu like be Amazone's menu
Post: https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
```
[Live Demo](https://hunghg255.github.io/menu-mega-aim/demo/index.html)
## Installation
[](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
```
```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',
});
```