Minimalist Hamburger Dropdown Menu With jQuery And CSS3

This is a minimal hamburger navigation for your responsive, cross-platform webpage/webapp that slides down a dropdown menu on toggle using jQuery animate method.

How to use it:

1. Include the Font Awesome for the menu icons.

<link rel="stylesheet" href="font-awesome.min.css">

2. Create the hamburger navigation as this:

<div class="nav">
  <div class="logo">
    Your Logo Here
  </div>
  <div class="main-nav">
    <a class="hamburger-nav"></a>
    <ul class="menu">
      <a href="#portfolio"><li>Portfolio</li></a>
      <a href="#about"><li>About</li></a>
      <a href="#contact"><li>Contact</li></a>
    </ul>
  </div>
</div>

3. Include the latest version of jQuery JavaScript library at the bottom of the webpage.

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

4. The main JavaScript (jQuery script) to activate the hamburger navigation.

$(document).ready(function(){

  $(".hamburger-nav").on("click", function(){

    // $(".menu").fadeToggle("slow").toggleClass("menu-hide");
    $(".menu").animate({
      height: 'toggle'
    });

  });

});

---

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