Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kanety/stimulus-menu
https://github.com/kanety/stimulus-menu
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/kanety/stimulus-menu
- Owner: kanety
- License: mit
- Created: 2021-10-03T08:55:57.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-05T06:41:57.000Z (6 months ago)
- Last Synced: 2024-10-16T09:04:14.065Z (3 months ago)
- Language: JavaScript
- Size: 62.5 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# stimulus-menu
A stimulus controller for simple menu.
## Dependencies
* @hotwired/stimulus 3.0+
## Installation
Install from npm:
$ npm install @kanety/stimulus-menu --save
## Usage
Register controller:
```javascript
import { Application } from '@hotwired/stimulus';
import MenuController from '@kanety/stimulus-menu';const application = Application.start();
application.register('menu', MenuController);
```Import css:
```css
@import '@kanety/stimulus-menu';
```Build html as follows:
```html
```
You can also build vertical menu as follows:
```html
```
### Options
#### auto-open
Open menu by mouse hovering:
```javascript
```
#### keep-open
Keep menu opened after clicking menu items:
```javascript
```
#### toggle-element
You can change toggle element (default is `a`). For example:
```javascript
- Button
```
### Callbacks
Set callbacks fired when a menu item is opened / closed:
```javascript
let element = document.querySelector('[data-controller="menu"]');
element.addEventListener('menu:opened', (e) => {
console.log('opened: ' + e.detail.item.querySelector('a').href);
});
element.addEventListener('menu:closed', (e) => {
console.log('closed: ' + e.detail.item.querySelector('a').href);
});
```
## License
The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).