Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/4xmen/x-mega-menu

x mega menu is repsonsive mega menu based on vannilajs
https://github.com/4xmen/x-mega-menu

4xmen javascript mega-menu menu navbar navigation rtl-design rtl-menu scss vannila-js xstack

Last synced: 3 days ago
JSON representation

x mega menu is repsonsive mega menu based on vannilajs

Awesome Lists containing this project

README 

        




  


  

    X-MEGA_MENU

  

  


  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 you can use CDN package:



CSS ⬇️

````



````

JavaScript ⬇️

````



````



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





Mega Menu Style








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](https://demos.4xmen.ir/x-mega-menu/example/)

- [online rtl demo](https://demos.4xmen.ir/x-mega-menu/example/index-rtl.html)



## 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](https://github.com/4xmen/x-mega-menu/issues) 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](https://help.github.com/articles/fork-a-repo/)).

- Clone to your machine git clone https://github.com/YOUR_USERNAME/Anubias-Desktop.git

- Make your changes

- Create a pull request



## Developing project



Dependencies are `node-sass` and `minify`



To render css:

```shell

npm run scss

```



To build:

```shell

npm run build

```



## Badges






[![X-Mega-Menu](https://img.shields.io/badge/Mega-Menu-red.svg)](https://github.com/4xmen/x-mega-menu)

[![GitHub](https://img.shields.io/badge/Github-4xmen-blue.svg)](https://GitHub.com/4xmen)

[![Xstack](https://img.shields.io/badge/Xstack-Team-red.svg)](https://xstack.ir)

[![4xmen](https://img.shields.io/badge/4xmen-Team-black.svg)](https://4xmen.ir)

[![Devefun](https://img.shields.io/badge/Devefun-Community-blue.svg)](https://Telegram.me/Devefun)






## License



[![GPLv3 License](https://img.shields.io/badge/License-GPL%20v3-yellow.svg)](https://opensource.org/licenses/GNU)



[GPL](https://www.gnu.org/licenses/gpl-3.0.en.html)



## Support



Star Repo If Like It ...



 Developed With Love ! ❤️