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');
}
});- import css or scss
@import "~x-mega-menu/src/x-mega-menu";- import js and use it
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
- You can watch /example of project.
- online demo
- online rtl demo
| 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 |
- Dark
- Red
- Blue
- gray
- customizable theme as you want
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:
- 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
Dependencies are node-sass and minify
To render css:
npm run scssTo build:
npm run build
Developed With Love ! ❤️