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

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

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>

You can fetch more list via data-fetch-url

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

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
}