Multi-level Hamburger Navigation Plugin - jQuery mlStackNav

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.

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
});

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

  • Publication date: 25.01.2018
  • Source