# X-Mega-Menu
x mega menu is easy usable multi level responsive with vanillaJS very fast and without any dependencies (ltr and rtl support).
## How use it?
With package manager:
````
npm i x-mega-menu
````
or
````
yarn add x-mega-menu
````
or use dist file of repo.
add assets:
```html
```
HTML:
```html
```
javascript use:
```javascript
xMegaMenu('#mega-menu', {
responseWidth: 1124,
isRtl: true,
mainTitle: '🖤 xStack menu 🖤',
blurEffect: true,
disableLinks: true,
fixedTop: true,
onCloseSideMenu: function () {
console.log('closed');
},
onOpenSideMenu: function () {
console.log('opened');
}
});
```
# webpack or vite (`vuejs` or `reactjs`) usage
1. import css or scss
```scss
@import "~x-mega-menu/src/x-mega-menu";
```
2. import js and use it
```javascript
import xMegaMenu from 'x-mega-menu/dist/x-mega-menu';
xMegaMenu('#mega-menu', {
// options
});
```
# Screenshots
Mega Menu Style
Blue Theme
Red Theme
Dark Theme
## 🔗 Links
https://www.npmjs.com/package/x-tree-select
http://4xmen.ir/
https://xstack.ir
## DEMO (example)
- You can watch /example of project.
- [online demo](https://demos.4xmen.ir/x-mega-menu/example/)
- [online rtl demo](https://demos.4xmen.ir/x-mega-menu/example/index-rtl.html)
## option and events
| name | default | action |
| ------------ | ------------ | ------------ |
| responseWidth | `1024` | active mobile mode (side menu) |
| barsIcon | - | any html element use for toggle bar |
| mainTitle | `Navbar menu` | change main menu title |
| isRtl | `false` | change direction to rtl |
| blurEffect | `false` | blur effect when menu active |
| resetMenu | `true` | reset side menu when close |
| disableLinks | `true` | disable links when has sub menu click event otherwise on mouse enter show sub level |
###events
| name | action |
| ------------ | ------------ |
| onCloseSideMenu | Trigger when side menu open |
| onOpenSideMenu | Trigger when side menu close |
## Theme
* Dark
* Red
* Blue
* gray
* customizable theme as you want
## Report Some Bugs
Find a Bug? Please, [create an issue](https://github.com/4xmen/x-mega-menu/issues) and we'll fix it together for a better template.
## Contribution
Contribution are always welcome and recommended! Here is how:
- Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)).
- Clone to your machine git clone https://github.com/YOUR_USERNAME/Anubias-Desktop.git
- Make your changes
- Create a pull request
## Badges
## License
[](https://opensource.org/licenses/GNU)
[GPL](https://www.gnu.org/licenses/gpl-3.0.en.html)
## Developing project
Dependencies are `node-sass` and `minify`
To render css:
```shell
npm run scss
```
To build:
```shell
npm run build
```
## Support
Star Repo If Like It ...
