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