Responsive Dropdown & Toggle Menu Plugin With jQuery

A jQuery/Less based responsive multi-level dropdown menu which will be automatically converted into a mobile-friendly toggle menu when the screen size is smaller than a breakpoint you specify.

View more:

• Top 50 Off-canvas Navigation jQuery Plugins

How to use it:

1. Add as many levels of menus & sub menus to the dropdown navigation as shown below:

<ul>
  <li>
    <a href="http://google.com">Menu 1</a>
      <ul>
          <li>
              <a href="http://google.com">Sub menu1</a>
              <ul>
                  <li>
                      <a href="http://google.com">Sub Sub menu1</a>
                      <ul>
                          <li>
                              <a href="http://google.com">Sub Sub Sub menu 1 </a>
                              <ul>
                                  <li><a href="http://google.com">Sub Sub Sub menu 1 </a></li>
                                  <li><a href="http://google.com">Sub Sub Sub menu 1</a></li>
                                  <li><a href="http://google.com">Sub Sub Sub menu 1</a></li>
                              </ul>
                          </li>
                          <li><a href="http://google.com">Sub Sub Sub menu 1</a></li>
                          <li><a href="http://google.com">Sub Sub Sub menu 1</a></li>
                      </ul>
                  </li>
                  <li>
                      <a href="http://google.com">Sub Sub menu 1</a>
                      <ul>
                          <li><a href="http://google.com">Sub Sub Sub menu 1 </a></li>
                          <li><a href="http://google.com">Sub Sub Sub menu 1</a></li>
                          <li><a href="http://google.com">Sub Sub Sub menu 1</a></li>
                      </ul>
                  </li>
                  <li>
                      <a href="http://google.com">Sub Sub menu 1</a>
                      <ul>
                          <li>
                              <a href="http://google.com">Sub Sub Sub menu 1 </a>
                              <ul>
                                  <li><a href="http://google.com">Sub Sub Sub menu 1 </a></li>
                                  <li><a href="http://google.com">Sub Sub Sub menu 1</a></li>
                                  <li><a href="http://google.com">Sub Sub Sub menu 1</a></li>
                              </ul>
                          </li>
                          <li><a href="http://google.com">Sub Sub Sub menu 1</a></li>
                          <li><a href="http://google.com">Sub Sub Sub menu 1</a></li>
                      </ul>
                  </li>
              </ul>
          </li>
          <li>
              <a href="http://google.com">Sub menu 1</a>
              <ul>
                  <li><a href="http://google.com">Sub Sub Sub menu 1 </a></li>
                  <li><a href="http://google.com">Sub Sub Sub menu 1</a></li>
                  <li><a href="http://google.com">Sub Sub Sub menu 1</a></li>
              </ul>
          </li>
          <li>
              <a href="http://google.com">Sub menu 1</a></li>
      </ul>
  </li>
  <li>
      <a href="http://google.com">Menu 2</a>
      <ul>
          <li>
              <a href="http://google.com">Sub menu 2</a>
              <ul>
                  <li><a href="http://google.com">Sub Sub Sub menu 1 </a></li>
                  <li><a href="http://google.com">Sub Sub Sub menu 1</a></li>
                  <li><a href="http://google.com">Sub Sub Sub menu 1</a></li>
              </ul>
          </li>
          <li><a href="http://google.com">Sub menu 2</a></li>
      </ul>
  </li>
  <li>
      <a href="http://google.com">Menu 3</a>
  </li>
</ul>

2. Create a menu toggle button for the mobile navigation.

<a href="#">Toggle Menu</a>

3. Style the normal dropdown navigation in the CSS:

nav {
  min-height: 40px;
  background: #1b99e9;
  padding: 0;
  margin: 0;
}

nav ul {
  margin: 0;
  list-style: none;
  background: #1b99e9;
}

nav ul > li { line-height: 40px; }

nav a {
  color: white;
  text-decoration: none;
}

@media screen and (min-width: 1025px) {

nav > a { display: none; }

nav * {
  padding: 0;
  margin: 0;
}

nav > ul { display: flex; }

nav > ul > li {
  font-weight: 700;
  cursor: pointer;
  line-height: 40px;
  text-align: center;
  width: 200px;
  position: relative;
  border-left: 1px solid #00baff;
}

nav > ul > li:hover { background: #00baff; }

nav > ul > :first-child { margin-left: -15px; }

nav > ul > li ul li {
  border-bottom: 1px solid #00baff;
  cursor: pointer;
}

nav > ul > li ul li:hover { background: #00baff; }

nav ul > li ul {
  position: absolute;
  width: 200px;
  display: none;
}

nav ul > li > ul > li > ul > li > ul,  nav ul > li > ul > li > ul {
  border-left: 1px solid #00baff;
  margin-left: 200px;
  margin-top: -40px;
}

nav ul > li:hover > ul { display: block; }
}

4. Style the mobile menu in the CSS media queries.

@media screen and (max-width: 1025px) {

nav > ul li {
  font-weight: 700;
  border-bottom: 1px solid #00baff;
}

nav * > li > a {
  border: 1px slid #00baff;
  display: block;
  width: 100%;
  height: 100%;
  padding-left: 5px;
}

nav li a:focus { background: #00baff; }

nav * li:last-child { border-bottom: 0; }

nav > a {
  margin-top: 5px;
  margin-left: 5px;
  display: inline-block;
  color: white;
}

nav > ul { display: none; }

nav ul > li > ul,  nav ul > li > ul > li > ul > li > ul,  nav ul > li > ul > li > ul { display: none; }
}

5. Load the latest version of jQuery JavaScript library at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>

6. The core JavaScript to active the responsive navigation.

var list = $("nav>ul li > a"); 

$("nav > a").click(function(event){
    $("nav>ul").slideToggle();
});

list.click(function (event) {
    var submenu = this.parentNode.getElementsByTagName("ul").item(0);
    if(submenu!=null){
        event.preventDefault();
        $(submenu).slideToggle();
    }
});

$(window).resize(function () {
    if ($(window).width() > 1024) {
        $("nav > ul, nav > ul  li  ul").removeAttr("style");
    }
});

---

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