Vegas navigation is awesome and easy to use the responsive drop-down menu that supports drop-down and mega menu both within the same navigation menu. It is built with JQuery, HTML5, and CSS3 so anyone can customize it easily. There are many predefined sizes that convert the navigation to hamburger folding on responsive devices, you just need to add the specific class (vg-nav-xl, vg-nav-lg, vg-nav-md, etc) to your navigation.

Features:

• Easy to implement, no coding knowledge required.
• Supports drop-down and mega menu both.
• Automatically converts to the hamburger menu depending on the size that you mentioned.
• Written in JQuery, html5, and ССS3 so it is easily customizable.

How to use it:

1. Include the Javascript vgnav.js at the bottom of the web page.

<script src="path/to/vgnav.js"></script>

2. Include the CSS vgnav.css in the header of the page.

<link rel="stylesheet" href="path/to/vgnav.css">

3. Add vgnav-theme.css for default styling.

<link rel="stylesheet" href="path/to/vgnav-theme.css">

4. Add the basic HTML to the page.

<nav class="vg-nav vg-nav-lg">
  <ul>
    <li class="active"><a href="/">Home page</a></li>
    <li class="dropdown">
      <a href="#">Left dropdown</a>
      <ul class="left">
        ...
      </ul>
    </li>
    <li class="dropdown-mega">
      <a href="#">Mega Menu</a>
      <div class="dropdown-mega-container">
        ...
      </div>
    </li>
    <li class="dropdown">
      <a href="#">Right dropdown</a>
      <ul class="right">
        ...
      </ul>
    </li>
  </ul>
</nav>

5. Initialize the plugin and we're ready to go.

$(document).ready(function () {
  $('.vg-nav').vegasMenu();
});

Hamburger folding. Use the following classes next to the main:

.vg-nav-xl /* Desktop and laptop */
.vg-nav-lg /* Tablets landscape */
.vg-nav-md /* Tablets portrait */
.vg-nav-sm /* Phone landscape */
.vg-nav-xs /* Phone portrait */

<nav class="vg-nav vg-nav-lg">
  <ul>
    <li class="active"><a href="/">Home page</a></li>
    <li class="dropdown">
      <a href="#">Left dropdown</a>
      <ul class="left">
  			<li><a href="/">Any page</a></li>
  			<li class="dropdown">
  				<a href="#">Second level</a>
  				<ul class="left">
  					<li><a href="/">Another page</a></li>
  					<li><a href="/">Any page</a></li>
  					<li class="dropdown">
  						<a href="#">Third level</a>
  						<ul class="left">
  							<li><a href="/">Any page</a></li>
  							<li><a href="/">Another page</a></li>
  						</ul>
  					</li>
  				</ul>
  			</li>
  			<li><a href="/">Another page</a></li>
  		</ul>
    </li>
    <li class="dropdown-mega">
      <a href="#">Mega Menu</a>
      <div class="dropdown-mega-container">
  			<div class="row">
  				<div class="col-md-4 text-left">
  					Left
  				</div>
  				<div class="col-md-4 text-center">
  					Center
  				</div>
  				<div class="col-md-4 text-right">
  					Right
  				</div>
  			</div>
  		</div>
    </li>
    <li class="dropdown">
      <a href="#">Right dropdown</a>
      <ul class="right">
  			<li><a href="/">Any page</a></li>
  			<li class="dropdown">
  				<a href="#">Second level</a>
  				<ul class="right">
  					<li><a href="/">Another page</a></li>
  					<li><a href="/">Any page</a></li>
  					<li class="dropdown">
  						<a href="#">Third level</a>
  						<ul class="right">
  							<li><a href="/">Any page</a></li>
  							<li><a href="/">Another page</a></li>
  						</ul>
  					</li>
  				</ul>
  			</li>
  			<li><a href="/">Another page</a></li>
  		</ul>
    </li>
  </ul>
</nav>

$(document).ready(function () {
  $('.vg-nav').vegasMenu();
});