X Mega Menu

---

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

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
- online rtl demo

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 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).
- Clone to your machine git clone https://github.com/YOUR_USERNAME/Anubias-Desktop.git
- Make your changes
- Create a pull request

Badges


License


GPL

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 ...