Responsive Mega Menu Plugin With jQuery And CSS3

A jQuery based responsive mega menu that automatically collapses the regular multi-level dropdown menu into a mobile-friendly toggle menu in mobile view.

How to use it:

1. Load the Font Awesome library for the menu icons.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

2. Create the html for the multi-level mega menu.

<div class="menu-container clearfix">
  <button class="nav_menu_toggler_icon"><span class="fa fa-bars"></span></button>
  <nav class="manu clearfix">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="#">School</a>
            <ul>
              <li><a href="#">Lidership</a></li>
              <li><a href="#">History</a></li>
              <li><a href="#">Locations</a></li>
              <li><a href="#">Careers</a></li>
            </ul>
          </li>
          <li><a href="#">Study</a>
            <ul>
              <li><a href="#">Undergraduate</a></li>
              <li><a href="#">Masters</a></li>
              <li><a href="#">International</a></li>
              <li><a href="#">Online</a></li>
            </ul>
          </li>
          <li><a href="#">Research</a>
            <ul>
              <li><a href="#">Undergraduate research</a></li>
              <li><a href="#">Masters research</a></li>
              <li><a href="#">Funding</a></li>
            </ul>
          </li>
          <li><a href="#">Something</a>
            <ul>
              <li><a href="#">Sub something</a></li>
              <li><a href="#">Sub something</a></li>
              <li><a href="#">Sub something</a></li>
              <li><a href="#">Sub something</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">News</a>
        <ul>
          <li><a href="#">Today</a></li>
          <li><a href="#">Calendar</a></li>
          <li><a href="#">Sport</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a>
        <ul>
          <li><a href="#">School</a>
            <ul>
              <li><a href="#">Lidership</a></li>
              <li><a href="#">History</a></li>
              <li><a href="#">Locations</a></li>
              <li><a href="#">Careers</a></li>
            </ul>
          </li>
          <li><a href="#">Study</a>
            <ul>
              <li><a href="#">Undergraduate</a></li>
              <li><a href="#">Masters</a></li>
              <li><a href="#">International</a></li>
              <li><a href="#">Online</a></li>
            </ul>
          </li>
          <li><a href="#">Study</a>
            <ul>
              <li><a href="#">Undergraduate</a></li>
              <li><a href="#">Masters</a></li>
              <li><a href="#">International</a></li>
              <li><a href="#">Online</a></li>
            </ul>
          </li>
          <li><a href="#">Empty sub</a></li>
        </ul>
      </li>
      <li><a href="#">About Us</a></li>
    </ul>
  </nav>
</div>

3. Load the necessary jQuery library and the main JavaScript navScript.js at the end of the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/navScript.js"></script>

4. The main CSS/CSS3 styles for the mega menu. Copy, paste, and insert the following CSS snippets into your document and done.

.menu-container {
  width: 100%;
  display: none;
  z-index: 100;
  margin: 0 auto 0 auto;
  background-image: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.2), rgba(0,0,0,.0))
}

.menu-container:after, .menu-container:before {
  content: "";
  clear: both;
}

.menu-container:after { display: table; }

.menu-container .manu {
  width: 95%;
  display: block;
  position: relative;
  margin: 0 auto 0 auto;
}

.menu ul { }

.menu ul:before, .menu ul:after {
  content: "";
  display: table;
}

.menu ul:after { clear: both; }

.menu:before, .menu:after {
  content: "";
  display: table;
}

.menu:after { clear: both; }

.menu ul li ul:before, .menu ul li ul:after {
  content: "";
  display: table;
}

.menu ul li ul:after { clear: both; }

.menu-container .manu ul li {
  float: left;
  background-color: transparent;
}

.menu-container .manu ul li a {
  display: block;
  padding: 15px 25px;
  color: #fff;
  font-size: 16px;
  transition: .2s;
}

.menu-container .manu ul li a span {
  transition: .3s all ease-out;
  line-height: 0px;
}

.menu-container .manu ul li a:hover { color: #14a0f9; }

.menu-container .manu ul li a:hover span {
  transform: rotate(180deg);
  padding-right: 5px;
}

.menu-container .manu ul li a:hover { border-bottom: 1px solid #fff; }

span.drop_down_icon {
  color: #fff;
  padding-left: 5px;
  font-size: 18px;
  position: absolute;
  margin-top: 11px;
}

.menu-container .manu ul li .have_dropdown {
  background-color: transparent;
  position: absolute;
  /*	left: 0;*/
  display: none;/*	width: 100%;*/
}

.menu-container .manu ul li .have_dropdown li {
  width: 25%;
  float: none;
}

.menu-container .manu ul li .have_dropdown_n_style {
  background-color: transparent;
  position: absolute;
  left: 0;
  display: none;
  width: 100%;
}

.menu-container .manu ul li .have_dropdown_n_style li a {
  color: #0076db;
  border-bottom: 1px solid #fff;
}

.menu-container .manu ul li .have_dropdown_n_style li a:hover { font-weight: bold; }

.menu-container .manu ul li .have_dropdown_n_style li ul li a {
  color: #285284;
  border-bottom: none;
}

.menu-container .manu ul li .have_dropdown_n_style li ul li a:hover {
  color: #0076db;
  font-weight: normal;
  background-color: #fafafa;
  text-decoration: underline;
}

.menu-container .manu ul li .have_dropdown_n_style li {
  width: 25%;
  float: left;
}

.menu-container .manu ul li .have_dropdown_n_style { background-color: #eee; }

.menu-container .manu ul li .have_dropdown li a {
  width: 150px;
  text-align: center;
  float: left;
  color: #285284;
  background-color: #fff;
  font-weight: normal;
}

.menu-container .manu ul li .have_dropdown li a:hover {
  background-color: #FAFAFA;
  color: #14a0f9;
}

.menu-container .manu ul li .have_dropdown li ul li { display: none; }

.menu-container .manu ul li .have_dropdown_n_style li ul li {
  background-color: #fff;
  height: auto;
  float: none;
  display: block;
  width: 100%;
}

.nav_menu_toggler_icon {
  cursor: pointer;
  position: absolute;
  right: 5%;
  top: 2.3%;
  background: none;
  color: #fff;
  font-size: 25px;
  z-index: 150;
  display: none;
  border: none;
}

.nav_menu_toggler_icon span {
  padding: 2px 7px;
  border-radius: 8px;
}

.nav_menu_toggler_icon:active { color: #ddd; }

.container_help {
  text-align: center;
  margin-top: 40vh;
}

.container_help h2 {
  color: #fff;
  font-size: 30px;
  font-weight: normal;
}
@media only screen and (max-width: 756px) {

.nav_menu_toggler_icon { display: block; }

.menu-container { background: skyblue; }

.menu-container .manu { display: none; }

.menu-container .manu ul li {
  float: none;
  display: block;
}

.menu-container .manu ul li .have_dropdown {
  background-color: transparent;
  display: none;
  position: relative;
}

.menu-container .manu ul li .have_dropdown li {
  display: block;
  float: none;
  width: 100%;
  background-color: #fff;
}

.menu-container .manu ul li .have_dropdown li a {
  display: block;
  float: none;
  width: 100%;
  padding: 15px 0px;
}

.menu-container .manu ul li .have_dropdown_n_style li {
  width: 100%;
  float: none;
}

.menu-container .manu ul li .have_dropdown_n_style li a { float: none; }

.menu-container .manu ul li .have_dropdown_n_style { position: relative; }
}

---

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