Mobile-friendly Multi-level Dropdown Menu Plugin For jQuery

A simple and easy to style jQuery plugin for creating a responsive, horizontal, multi-level dropdown menu that automatically collapses navigation links and shows them in an off-canvas sidebar navigation on small screen devices.

How to use it:

1. Include the main style sheet on the head section of the web page.

<link rel="stylesheet" href="styles.min.css">

2. Create the multi-level dropdown menu from nested html unordered lists as follows:

<div class="menu-content overlay">

  <nav class="menu">

      <ul>

        <li class="menu__item">
          <a href="#" class="menu__link">Link 1</a>
        </li>

        <li class="menu__item to-left">
          <a href="#" class="menu__link">Link 2</a>
          <ul class="menu__sub-menu">
            <li class="menu__sub-menu__item">
              <a href="" class="menu__sub-menu__link">Submenu link 1</a>
            </li>

            <li class="menu__sub-menu__item">
              <a href="" class="menu__sub-menu__link">Submenu link 2</a>
            </li>

            <li class="menu__sub-menu__item to-left">
              <a href="" class="menu__sub-menu__link">Submenu link 3</a>

              <ul class="menu__sub-menu">
                <li class="menu__sub-menu__item">
                  <a href="" class="menu__sub-menu__link">Submenu link 1</a>
                </li>

                <li class="menu__sub-menu__item">
                  <a href="" class="menu__sub-menu__link">Submenu link 2</a>
                </li>

                <li class="menu__sub-menu__item">
                  <a href="" class="menu__sub-menu__link">Submenu link 3</a>
                  <ul class="menu__sub-menu">
                    <li class="menu__sub-menu__item">
                      <a href="" class="menu__sub-menu__link">Submenu link 1</a>
                    </li>

                    <li class="menu__sub-menu__item">
                      <a href="" class="menu__sub-menu__link">Submenu link 2</a>
                    </li>
                  </ul>
                </li>

                <li class="menu__sub-menu__item">
                  <a href="" class="menu__sub-menu__link">Submenu link 4</a>
                </li>
              </ul>
            </li>

            <li class="menu__sub-menu__item">
              <a href="" class="menu__sub-menu__link">Submenu link 4</a>
            </li>
          </ul>

        </li>

        <li class="menu__item">
          <a href="#" class="menu__link">Link 3</a>
        </li>

        <li class="menu__item">
          <a href="#" class="menu__link">Link 4</a>
        </li>

      </ul>

  </nav>

</div>

3. Include jQuery JavaScript library and the main JavaScript at the bottom of the web page.

<script src="js/scripts.js"></script>

4. Initialize the responsiveMenu plugin and set the breakpoint in the JavaScript.

jQuery(document).ready(function($) {
  $('.menu').responsiveMenu({
    breakpoint: '992'
  });
});

---

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