Multi-level Hamburger Navigation Plugin - jQuery mlStackNav

mlStackNav is a jQuery plugin to create customizable, accessible, easy-to-use, mobile-friendly, multi-level stack navigation menu with slide effects. The sub menu will be stacked on the top of its parent similar to the drilldown menu.

How to use it:

1. Add jQuery JavaScript library and the mlStackNav plugin's files to the web page.

<link rel="stylesheet" href="dist/ml-stack-nav.min.css">
<link rel="stylesheet" href="dist/ml-stack-nav-theme.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="dist/ml-stack-nav.min.js"></script>

2. Add the hamburger nav toggle to the web page.

<button type="button" class="ml-stack-nav-toggle">
  <span class="ml-stack-nav-toggle__line"></span>
  <span class="ml-stack-nav-toggle__line"></span>
  <span class="ml-stack-nav-toggle__line"></span>
</button>

3. Create nested HTML lists for the multi-level navigation.

<nav class="ml-stack-nav js-ml-stack-nav">
  <ul class="ml-stack-nav__menu">
    <li class="ml-stack-nav__item">
      <div class="ml-stack-nav__item-inner"> <a href="" class="ml-stack-nav__link"> Item 1 </a>
        <button class="ml-stack-nav__next js-ml-stack-nav-next" type="button" title="Go to the next level">&rarr;</button>
      </div>
      <ul class="ml-stack-nav__menu">
        <li class="ml-stack-nav__item">
          <button class="ml-stack-nav__back js-ml-stack-nav-back" type="button" title="Go to the previous level">&larr; Back</button>
        </li>
        <li class="ml-stack-nav__item">
          <div class="ml-stack-nav__item-inner"> <a href="" class="ml-stack-nav__link"> Item 1 level 2 </a>
            <button class="ml-stack-nav__next js-ml-stack-nav-next" type="button" title="Go to the next level">&rarr;</button>
          </div>
          <ul class="ml-stack-nav__menu">
            <li class="ml-stack-nav__item">
              <button class="ml-stack-nav__back js-ml-stack-nav-back" type="button" title="Go to the previous level">&larr; Back</button>
            </li>
            <li class="ml-stack-nav__item">
              <div class="ml-stack-nav__item-inner"> <a href="" class="ml-stack-nav__link"> Item 1 level 3 </a>
                <button class="ml-stack-nav__next js-ml-stack-nav-next" type="button" title="Go to the next level">&rarr;</button>
              </div>
              <ul class="ml-stack-nav__menu">
                <li class="ml-stack-nav__item">
                  <button class="ml-stack-nav__back js-ml-stack-nav-back" type="button" title="Go to the previous level">&larr; Back</button>
                </li>
                <li class="ml-stack-nav__item"> <a href="" class="ml-stack-nav__link"> Item 1 level 4 </a> </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="ml-stack-nav__item"> <a href="" class="ml-stack-nav__link"> Item 2 </a> </li>
        <li class="ml-stack-nav__item"> <a href="" class="ml-stack-nav__link"> Item 3 </a></li>
      </ul>
    </li>
    <li class="ml-stack-nav__item">
      <div class="ml-stack-nav__item-inner"> <a href="" class="ml-stack-nav__link"> Item 2 </a>
        <button class="ml-stack-nav__next js-ml-stack-nav-next" type="button" title="Go to the next level">&rarr;</button>
      </div>
      <ul class="ml-stack-nav__menu">
        <li class="ml-stack-nav__item">
          <button class="ml-stack-nav__back js-ml-stack-nav-back" type="button" title="Go to the previous level">&larr; Back</button>
        </li>
        <li class="ml-stack-nav__item">
          <div class="ml-stack-nav__item-inner"> <a href="" class="ml-stack-nav__link"> Item 1 level 2 </a>
            <button class="ml-stack-nav__next js-ml-stack-nav-next" type="button" title="Go to the next level">&rarr;</button>
          </div>
          <ul class="ml-stack-nav__menu">
            <li class="ml-stack-nav__item">
              <button class="ml-stack-nav__back js-ml-stack-nav-back" type="button" title="Go to the previous level">&larr; Back</button>
            </li>
            <li class="ml-stack-nav__item"> <a href="" class="ml-stack-nav__link"> Item 2 level 3 </a> </li>
          </ul>
        </li>
        <li class="ml-stack-nav__item"> <a href="" class="ml-stack-nav__link"> Item 2 </a> </li>
        <li class="ml-stack-nav__item"> <a href="" class="ml-stack-nav__link"> Item 3 </a></li>
      </ul>
    </li>
    <li class="ml-stack-nav__item"> <a href="" class="ml-stack-nav__link"> Item 3 </a> </li>
    <li class="ml-stack-nav__item"> <a href="" class="ml-stack-nav__link"> Item 4 </a></li>
  </ul>
  <!-- /.ml-stack-nav__menu --> 
</nav>

4. Initialize the jQuery mlStackNav and done.

$(".js-ml-stack-nav").mlStackNav();

5. Default configuration options.

$(".js-ml-stack-nav").mlStackNav({
  navToggleSelector: ".ml-stack-nav-toggle",
  openClass: "is-open",
  activeClass: "is-active",
  zIndexValue: 900
});

Change log:

2018-02-26

• v1.1

2018-02-25

• Add basic aria attributes

---

This awesome jQuery plugin is developed by damianwajer. For more Advanced Usages, please check the demo page or visit the official website.