x-mega-menu
Advanced tools
x mega menu is easy usable multi level responsive with vanillaJS very fast and without any dependencies (ltr and rtl support).
With package manager:
npm i x-mega-menu
or
yarn add x-mega-menu
or use dist file of repo.
add assets:
<link rel="stylesheet" href="x-mega-menu/dist/x-mega-menu.min.css">
<script src="x-mega-menu/dist/x-mega-menu.min.js"></script>
HTML:
<nav>
<ul id="mega-menu">
<li>
<a href="#">
<img src="https://assets.ubuntu.com/v1/ff6a9a38-ubuntu-logo-2022.svg" alt="">
</a>
</li>
<li>
<a href="#">
menu item 1
</a>
<ul>
<li>
<h3>
sub item 1
</h3>
<ul>
<li><a href="#">sub sub item 01</a></li>
<li><a href="#">sub sub item 02</a></li>
<li><a href="#">sub sub item 03</a></li>
<li><a href="#">sub sub item 04</a></li>
<li><a href="#">sub sub item 05</a></li>
</ul>
</li>
<li>
<h3>
sub item 2
</h3>
<ul>
<li><a href="#">sub sub item 01</a></li>
<li><a href="#">sub sub item 02</a></li>
<li>
<a href="#">sub sub item 03 has</a>
<ul>
<li><a href="#">sub sub sub item 001</a></li>
<li><a href="#">sub sub sub item 002</a></li>
<li><a href="#">sub sub sub item 003</a></li>
<li>
<a href="#">
sub sub sub item 004 has sub
</a>
<ul>
<li><a href="#">sub sub sub item 001</a></li>
<li><a href="#">sub sub sub item 002</a></li>
<li><a href="#">sub sub sub item 003</a></li>
<li><a href="#">sub sub sub item 004</a></li>
<li><a href="#">sub sub sub item 005</a></li>
</ul>
</li>
<li>
<a href="#">sub sub sub item 005 has too</a>
<ul>
<li><a href="#">sub sub sub item 001</a></li>
<li><a href="#">sub sub sub item 002</a></li>
<li><a href="#">sub sub sub item 003</a></li>
<li><a href="#">sub sub sub item 004</a></li>
<li><a href="#">sub sub sub item 005</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">sub sub item 04</a></li>
<li><a href="#">sub sub item 05</a></li>
</ul>
</li>
<li>
<h3>
sub item 3
</h3>
<img src="https://assets.ubuntu.com/v1/ff6a9a38-ubuntu-logo-2022.svg" alt="">
</li>
<li class="x-highlight">
<h3>
This highlight section
</h3>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem doloremque ducimus enim
est et facilis iusto laboriosam magni molestiae molestias nesciunt obcaecati optio possimus
quam, quidem quos repudiandae sunt.
</p>
</li>
</ul>
</li>
<li>
menu item 2
<ul>
<li>
<h3>
sub item 1
</h3>
<ul>
<li><a href="#">sub sub item 01</a></li>
<li><a href="#">sub sub item 02</a></li>
<li><a href="#">sub sub item 03</a></li>
<li><a href="#">sub sub item 04</a></li>
<li><a href="#">sub sub item 05</a></li>
</ul>
</li>
<li>
<h3>
sub item 3
</h3>
<img src="https://assets.ubuntu.com/v1/ff6a9a38-ubuntu-logo-2022.svg" alt="">
</li>
<li>
<h3>
sub item 1
</h3>
<ul>
<li><a href="#">sub sub item 01</a></li>
<li><a href="#">sub sub item 02</a></li>
<li><a href="#">sub sub item 03</a></li>
<li><a href="#">sub sub item 04</a></li>
<li><a href="#">sub sub item 05</a></li>
</ul>
</li>
<li class="x-highlight">
<h3>
This highlight section
</h3>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem doloremque ducimus enim
est et facilis iusto laboriosam magni molestiae molestias nesciunt obcaecati optio possimus
quam, quidem quos repudiandae sunt.
</p>
</li>
</ul>
</li>
<li>
<a href="#">
menu item 3
</a>
</li>
<li>
<a href="#">
menu item 4
</a>
</li>
<li>
<a href="#">
menu item 3
</a>
</li>
<li>
menu item 4
</li>
<li class="x-always-show x-small">
🔍
</li>
</ul>
</nav>
javascript use:
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');
}
});
vuejs or reactjs) usage@import "~x-mega-menu/src/x-mega-menu";
import xMegaMenu from 'x-mega-menu/dist/x-mega-menu';
xMegaMenu('#mega-menu', {
// options
});
https://www.npmjs.com/package/x-tree-select
http://4xmen.ir/
https://xstack.ir
| 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 |
Find a Bug? Please, create an issue and we'll fix it together for a better template.
Contribution are always welcome and recommended! Here is how:
Dependencies are node-sass and minify
To render css:
npm run scss
To build:
npm run build
Star Repo If Like It ...
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.