Mobile-friendly Multi-level Dropdown Menu Plugin For jQuery

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.

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.

  • Publication date: 07.11.2017
  • Source