Hamburger Dropdown Menu With jQuery - Clarity.js

Clarity.js is an ultra-light, jQuery/CSS based, multi-level dropdown menu component that can be used as a mobile-friendly hamburger site navigation on your web app.

How to use it:

1. Create nested HTML lists for the dropdown menu.

<ul class="nav">
  <li><a href="#">Item 1</a></li>
  <li class="expand"><a href="#">Item 2<img src="next.svg"></a>
    <ul class="sub-menu">
        <li><a href="#">Sub Item 2.1</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a></li>
</ul>

2. Create a hamburger button to toggle the dropdown menu.

<button class="menu-btn">
  <img src="menu.svg" />
</button>

3. Style the dropdown menu & hamburger button.

/* button */
button {
  background: none;
  border: none;
  cursor: pointer;
}

button:active {
  border: none;
}

button img {
  max-width: 32px;
}

/* nav */
ul.nav {
  position: absolute;
  z-index: 99999;
  background: #eee;
  border: 1px solid black;
  padding: 15px;
  min-width: 100px;
  max-width: 140px;
  font-size: 18px;
}

ul.nav li img {
  width: 10px;
  padding: 0;
  margin: 0;
}

ul.nav li {
  list-style-type: none;
}

ul.nav a {
  text-decoration: none;
}

4. Load the latest jQuery JavaScript library in the HTML document.

<script src="/path/to/cdn/jquery.min.js"></script>

5. Enable the hamburger dropdown menu.

$(function (){

  // hide main menu
  $('.nav').hide(); 

  // select menu-button
  $('.menu-btn').click(function (){ 
    $('.nav').toggle(300); // expands menu
  });

  // hides sub-menu
  $('.sub-menu').hide(); 

  // selects button to expand menu
  $('.nav li.expand').click(function(){ 
    $('.sub-menu').toggle(300); // shows sub-menu
  });
  
});

---

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