sydmeeran/multi-menu

JavaScript for multi level menu

MultiMenu.js

Install

use npm

$ npm install multi-menu --save

or from cdn

<link rel="stylesheet" href="https://unpkg.com/multi-menu@0.0.3/css/multi-level-menu.css">
<script src="https://unpkg.com/multi-menu@0.0.3/bundle/multi-menu.js"></script>

Usage

basic usage

import MultiMenu from 'multi-menu';
import 'multi-menu/css/multi-level-menu.css';

new MultiMenu('.js-multi-menu');

When you want to limit the ul level to apply js

import MultiMenu from 'multi-menu';
import 'multi-menu/css/multi-level-menu.css';

new MultiMenu('.js-multi-menu', {
  levelLimit: 2
});

When you don't want to apply js to specific ul

import MultiMenu from 'multi-menu';
import 'multi-menu/css/multi-level-menu.css';

new MultiMenu('.js-multi-menu', {
  disableMenuClass: 'js-disable-menu'
});

<ul class="js-multi-menu">
  <li>test</li>
  <ul class="js-disable-menu">
    <li>test</li>
  </ul>
</ul>

When you want to prepend custom HTML on top of the ul

import MultiMenu from 'multi-menu';
import 'multi-menu/css/multi-level-menu.css';

new MultiMenu('.js-multi-menu', {
  prependHTML: (link) => `<a href="#" class="js-menu-back-btn">← Back </a></li><li class="title">${link.dataset.title}<li>`,
});

When you want to show specific ul first

<ul class="js-multi-menu">
  <li>test</li>
  <ul class="active">
    <li>test</li>
  </ul>
</ul>

Demo

https://pensive-lovelace-a07c9a.netlify.com/