Responsive Right-Side Hamburger Menu for Mobile and Desktops

Responsive hamburger menu on the right side for mobile devices, laptops and desktops as well. In this menu using html5 and custom css and using javascript to open and close menu and also toggle mobile responsive submenu.

multi level dropdown menu responsive, multi level hamburger menu codepen, jquery hamburger menu codepen, responsive navigation menu css free download

How to make use of it:

1. Load the compiled stylesheet within the doc.

<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="">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 wanted jQuery JavaScript library proper earlier than 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();
    })
  })
})

Responsive Multi-level Hamburger Nav, Responsive Hamburger Menu Plugin/Github, multi level sidebar menu bootstrap, hamburger menu jquery plugin