Responsive Multi-level Hamburger Nav In jQuery

A responsive, mobile-friendly, multi-level hamburger navigation system (also called offcanvas menu) written in JavaScript (jQuery) and CSS/CSS3.

How to use it:

1. Load the compiled stylesheet in the document.

<link rel="stylesheet" href="css/style.css" />

2. Code the HTML for the hamburger toggle button.

<div class="humburger" id="hambuger_menu">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>

3. The required HTML structure for the multi-level hamburger navigation.

<section class="menu_body" id="menubody">
  <div class="menu_body__item_wrapper">
    <!-- menu list-->
    <ul class="menu_list">
      <li><a href="#">Home</a></li>
      <!-- have submenu-->
      <li class="has_child"><a href="#">About</a>
        <ul class="sub-menu">
          <li><a href="#">Who We Are</a></li>
          <li><a href="#">Managment</a></li>
        </ul>
      </li>
      <!-- have submenu-->
      <li class="has_child"><a href="javascript">Projects</a>
        <ul class="sub-menu">
          <li><a href="#">Ongoing</a></li>
          <li><a href="#">Complete</a></li>
        </ul>
      </li>
      <li><a href="#">Brochure</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</section>

4. Load the needed jQuery JavaScript library right before the closing body tag.

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

5. Enable the hamburger button to toggle the navigation menu.

$(document).ready(function () {
  var display_width = $(window).width();
  var hamburger = $("#hambuger_menu");
  var menu = $("#menubody");
  $(hamburger).click(function (e) {
    menu.toggleClass("open");
    hamburger.toggleClass("open");
  });
  $(".menu_body__item_wrapper li.has_child").each(function (index) {
    $(this).click(function (event) {
      $('.sub-menu').eq(index).slideToggle();
      event.preventDefault();
      event.stopImmediatePropagation();
    });
    $('.sub-menu').click(function (e){
      e.stopPropagation();
      e.stopImmediatePropagation();
    })
  })
})

---

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