Fork me on GitHub

MultiMenu.js

About MultiMenu.js

It enables you to create multi level navigation menu with smooth transition like native apps.

You can try it on the left menu

View it on GitHub
Installation

via CDN

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

via npm

npm install multi-menu --save
Usage

js


import MultiMenu from 'multi-menu' // when you use webpack/rollup
import 'multi-menu/css/multi-menu.css' // when you use webpack/rollup

document.addEventListener("DOMContentLoaded", () => {
  new MultiMenu('.js-multi-menu')
});

html

<nav class="js-multi-menu">
<ul>
  <li> <a href="#"> Level1 Link1 </a> </li>
  <li> <a href="#"> Level1 Link2 </a> </li>
  <li> <a href="#"> Level1 Link3  </a> </li>
  <li> <a href="#"> Level1 Link4 </a>
    <ul>
      <li> <a href="#"> Level2 Link1 </a> </li>
      <li> <a href="#"> Level2 Link2 </a> </li>
      <li> <a href="#"> Level2 Link3 </a> </li>
      <li> <a href="#"> Level2 Link4 </a> </li>
      <li> <a href="#"> Level2 Link5 </a> </li>
      <li> <a href="#"> Level2 Link6 </a> </li>
    </ul>
  </li>
  <li> <a href="#"> Level1 Link5 </a>
    <ul>
      <li> <a href="#"> Level2 Link7 </a> </li>
      <li> <a href="#"> Level2 Link8 </a> </li>
      <li> <a href="#"> Level2 Link9 </a> </li>
    </ul>
  </li>
</ul>
</nav>
Advanced

You can fetch more list via data-fetch-url

<li><a href="#" data-fetch-url="fetch.html"> Foreign student special course </a></li>
Options

MultiMenu.js also has some options, The Option below is the default

new MultiMenu('js-multi-menu', {
  backBtnClass: 'js-menu-back-btn',
  disableMenuClass: 'js-disable-menu',
  activeMenuClass: 'active',
  flattenedClass: 'flattened',
  collapseClass: 'js-collapse',
  fetchAttribute: 'data-fetch-url',
  linkOnToggle: false,
  prependHTML: (link) => `<li><a href="#" class="js-menu-back-btn">← Back </a></li>`,
  appendHTML: (link) => `<span class="multi-menu-arrow"></span>`,
  levelLimit: Infinity, // The depth of the list you want to apply MultiMenu.js
}