{"id":19427653,"url":"https://github.com/4xmen/x-mega-menu","last_synced_at":"2025-04-13T08:39:38.451Z","repository":{"id":65818588,"uuid":"598865969","full_name":"4xmen/x-mega-menu","owner":"4xmen","description":"x mega menu is repsonsive mega menu based on vannilajs","archived":false,"fork":false,"pushed_at":"2024-03-23T06:22:20.000Z","size":1031,"stargazers_count":114,"open_issues_count":2,"forks_count":28,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-05-20T22:37:23.876Z","etag":null,"topics":["4xmen","javascript","mega-menu","menu","navbar","navigation","rtl-design","rtl-menu","scss","vannila-js","xstack"],"latest_commit_sha":null,"homepage":"https://4xmen.ir","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/4xmen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-08T00:40:45.000Z","updated_at":"2024-08-09T08:54:51.955Z","dependencies_parsed_at":"2024-08-09T09:06:52.960Z","dependency_job_id":null,"html_url":"https://github.com/4xmen/x-mega-menu","commit_stats":{"total_commits":38,"total_committers":4,"mean_commits":9.5,"dds":"0.26315789473684215","last_synced_commit":"98afe402de00f0fd7d245ed9e1326271d8f87baa"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4xmen%2Fx-mega-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4xmen%2Fx-mega-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4xmen%2Fx-mega-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4xmen%2Fx-mega-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/4xmen","download_url":"https://codeload.github.com/4xmen/x-mega-menu/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248685289,"owners_count":21145247,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["4xmen","javascript","mega-menu","menu","navbar","navigation","rtl-design","rtl-menu","scss","vannila-js","xstack"],"created_at":"2024-11-10T14:12:21.563Z","updated_at":"2025-04-13T08:39:38.425Z","avatar_url":"https://github.com/4xmen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://github.com/4xmen/x-mega-menu\"\u003e\n    \u003cimg src=\"example/img/openlogo-nd.svg\" alt=\"X-MEGA_MENU\" width=\"150\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://github.com/4xmen/x-mega-menu\"\u003eX Mega Menu\u003c/a\u003e\n  \u003cbr\u003e\n  \u003chr\u003e\n\u003c/h1\u003e\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````\n\nor you can use CDN package:\n\nCSS ⬇️\n````\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/x-mega-menu@1.4.1/dist/x-mega-menu.min.css\"\u003e\n````\nJavaScript ⬇️\n````\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/x-mega-menu@1.4.1/dist/x-mega-menu.min.js\"\u003e\u003c/script\u003e\n````\n\nadd assets:\n```html\n   \u003clink rel=\"stylesheet\" href=\"x-mega-menu/dist/x-mega-menu.min.css\"\u003e\n   \u003cscript src=\"x-mega-menu/dist/x-mega-menu.min.js\"\u003e\u003c/script\u003e\n```\n\nHTML:\n```html\n\u003cnav\u003e\n    \u003cul id=\"mega-menu\"\u003e\n        \u003cli\u003e\n            \u003ca href=\"#\"\u003e\n                \u003cimg src=\"https://assets.ubuntu.com/v1/ff6a9a38-ubuntu-logo-2022.svg\" alt=\"\"\u003e\n            \u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca href=\"#\"\u003e\n                menu item 1\n            \u003c/a\u003e\n            \u003cul\u003e\n                \u003cli\u003e\n                    \u003ch3\u003e\n                        sub item 1\n                    \u003c/h3\u003e\n                    \u003cul\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 01\u003c/a\u003e\u003c/li\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 02\u003c/a\u003e\u003c/li\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 03\u003c/a\u003e\u003c/li\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 04\u003c/a\u003e\u003c/li\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 05\u003c/a\u003e\u003c/li\u003e\n                    \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli\u003e\n                    \u003ch3\u003e\n                        sub item 2\n                    \u003c/h3\u003e\n                    \u003cul\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 01\u003c/a\u003e\u003c/li\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 02\u003c/a\u003e\u003c/li\u003e\n                        \u003cli\u003e\n                            \u003ca href=\"#\"\u003esub sub item 03 has\u003c/a\u003e\n                            \u003cul\u003e\n                                \u003cli\u003e\u003ca href=\"#\"\u003esub sub sub item 001\u003c/a\u003e\u003c/li\u003e\n                                \u003cli\u003e\u003ca href=\"#\"\u003esub sub sub item 002\u003c/a\u003e\u003c/li\u003e\n                                \u003cli\u003e\u003ca href=\"#\"\u003esub sub sub item 003\u003c/a\u003e\u003c/li\u003e\n                                \u003cli\u003e\n                                    \u003ca href=\"#\"\u003e\n                                        sub sub sub item 004 has sub\n                                    \u003c/a\u003e\n                                    \u003cul\u003e\n                                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub sub item 001\u003c/a\u003e\u003c/li\u003e\n                                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub sub item 002\u003c/a\u003e\u003c/li\u003e\n                                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub sub item 003\u003c/a\u003e\u003c/li\u003e\n                                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub sub item 004\u003c/a\u003e\u003c/li\u003e\n                                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub sub item 005\u003c/a\u003e\u003c/li\u003e\n                                    \u003c/ul\u003e\n                                \u003c/li\u003e\n                                \u003cli\u003e\n                                    \u003ca href=\"#\"\u003esub sub sub item 005 has too\u003c/a\u003e\n                                    \u003cul\u003e\n                                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub sub item 001\u003c/a\u003e\u003c/li\u003e\n                                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub sub item 002\u003c/a\u003e\u003c/li\u003e\n                                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub sub item 003\u003c/a\u003e\u003c/li\u003e\n                                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub sub item 004\u003c/a\u003e\u003c/li\u003e\n                                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub sub item 005\u003c/a\u003e\u003c/li\u003e\n                                    \u003c/ul\u003e\n                                \u003c/li\u003e\n                            \u003c/ul\u003e\n                        \u003c/li\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 04\u003c/a\u003e\u003c/li\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 05\u003c/a\u003e\u003c/li\u003e\n                    \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli\u003e\n                    \u003ch3\u003e\n                        sub item 3\n                    \u003c/h3\u003e\n                    \u003cimg src=\"https://assets.ubuntu.com/v1/ff6a9a38-ubuntu-logo-2022.svg\" alt=\"\"\u003e\n                \u003c/li\u003e\n                \u003cli class=\"x-highlight\"\u003e\n                    \u003ch3\u003e\n                        This highlight section\n                    \u003c/h3\u003e\n                    \u003cbr\u003e\n                    \u003cp\u003e\n                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem doloremque ducimus enim\n                        est et facilis iusto laboriosam magni molestiae molestias nesciunt obcaecati optio possimus\n                        quam, quidem quos repudiandae sunt.\n                    \u003c/p\u003e\n                \u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n\n            menu item 2\n\n            \u003cul\u003e\n                \u003cli\u003e\n                    \u003ch3\u003e\n                        sub item 1\n                    \u003c/h3\u003e\n                    \u003cul\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 01\u003c/a\u003e\u003c/li\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 02\u003c/a\u003e\u003c/li\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 03\u003c/a\u003e\u003c/li\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 04\u003c/a\u003e\u003c/li\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 05\u003c/a\u003e\u003c/li\u003e\n                    \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli\u003e\n                    \u003ch3\u003e\n                        sub item 3\n                    \u003c/h3\u003e\n                    \u003cimg src=\"https://assets.ubuntu.com/v1/ff6a9a38-ubuntu-logo-2022.svg\" alt=\"\"\u003e\n                \u003c/li\u003e\n                \u003cli\u003e\n                    \u003ch3\u003e\n                        sub item 1\n                    \u003c/h3\u003e\n                    \u003cul\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 01\u003c/a\u003e\u003c/li\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 02\u003c/a\u003e\u003c/li\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 03\u003c/a\u003e\u003c/li\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 04\u003c/a\u003e\u003c/li\u003e\n                        \u003cli\u003e\u003ca href=\"#\"\u003esub sub item 05\u003c/a\u003e\u003c/li\u003e\n                    \u003c/ul\u003e\n                \u003c/li\u003e\n\n                \u003cli class=\"x-highlight\"\u003e\n                    \u003ch3\u003e\n                        This highlight section\n                    \u003c/h3\u003e\n                    \u003cbr\u003e\n                    \u003cp\u003e\n                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem doloremque ducimus enim\n                        est et facilis iusto laboriosam magni molestiae molestias nesciunt obcaecati optio possimus\n                        quam, quidem quos repudiandae sunt.\n                    \u003c/p\u003e\n                \u003c/li\u003e\n\n            \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca href=\"#\"\u003e\n                menu item 3\n            \u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca href=\"#\"\u003e\n                menu item 4\n            \u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca href=\"#\"\u003e\n                menu item 3\n            \u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            menu item 4\n        \u003c/li\u003e\n        \u003cli class=\"x-always-show x-small\"\u003e\n            🔍\n        \u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/nav\u003e\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\u003cdiv align=\"center\"\u003e\n\u003ch2\u003eMega Menu Style\u003c/h2\u003e\n\u003cimg src=\"example/img/mega-menu.png\" width=\"600px\"\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n\u003ch2\u003eBlue Theme\u003c/h2\u003e\n\u003cimg src=\"example/img/screen-sidemenu-blue.png\" width=\"450px\"\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n\u003ch2\u003eRed Theme\u003c/h2\u003e\n\u003cimg src=\"example/img/screen-sidemenu-red.png\" width=\"450px\"\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n\u003ch2\u003eDark Theme\u003c/h2\u003e\n\u003cimg src=\"example/img/screen-sidemenu-dark.png\" width=\"450px\"\u003e\n\u003c/div\u003e\n\n## 🔗 Links\nhttps://www.npmjs.com/package/x-tree-select\n\u003cbr\u003e\nhttp://4xmen.ir/\n\u003cbr\u003e\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\u003cdiv align=\"center\"\u003e\n\n| name    |  action  |\n| ------------  | ------------ |\n| onCloseSideMenu   |  Trigger when side menu open |\n| onOpenSideMenu |  Trigger when side menu close   |\n\n\u003c/div\u003e\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## 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## Badges\n\n\u003cdiv align=\"center\"\u003e\n\n[![X-Mega-Menu](https://img.shields.io/badge/Mega-Menu-red.svg)](https://github.com/4xmen/x-mega-menu)\n[![GitHub](https://img.shields.io/badge/Github-4xmen-blue.svg)](https://GitHub.com/4xmen)\n[![Xstack](https://img.shields.io/badge/Xstack-Team-red.svg)](https://xstack.ir)\n[![4xmen](https://img.shields.io/badge/4xmen-Team-black.svg)](https://4xmen.ir)\n[![Devefun](https://img.shields.io/badge/Devefun-Community-blue.svg)](https://Telegram.me/Devefun)\n\n\u003c/div\u003e\n\n\n## License\n\n[![GPLv3 License](https://img.shields.io/badge/License-GPL%20v3-yellow.svg)](https://opensource.org/licenses/GNU)\n\n\n\n[GPL](https://www.gnu.org/licenses/gpl-3.0.en.html)\n\n\n## Support\n\nStar Repo If Like It ...\n\n\u003cdiv align=\"center\"\u003e Developed With Love ! ❤️\u003c/div\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4xmen%2Fx-mega-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F4xmen%2Fx-mega-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4xmen%2Fx-mega-menu/lists"}