How to Add a Mega Menu to your Website

A mega menu is a dropdown triggered by hovering over a link. This shows all options in one main, mega-panel and groups related topics into categories.

A mega menu is a drop down that is triggered by hovering over a link or defined area. This dropdown usually shows all options in one main, mega-panel and oftentimes groups related topics into categories. In this article, Solodev will show you how to add a mega menu to your website.

Below is the HTML, CSS, and JavaScript required.

Step 1 - mega-menu.html

Add the HTML below to your web page

<div class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img alt="Logo" src="https://www.solodev.com/assets/side-nav/logo.png"></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li class="dropdown menu-large">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Products <b class="caret"></b> </a>
          <ul class="dropdown-menu megamenu">
            <li class="row">
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
            </li>
          </ul>
        </li>
        <li class="dropdown menu-large">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a>          
          <ul class="dropdown-menu megamenu row">
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Software</li>
                <li><a href="#">Desktop</a></li>
                <li class="disabled"><a href="#">Mobile</a></li>
                <li><a href="#">Tablet</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Hardware</li>
                <li><a href="#">Arduino</a></li>
                <li><a href="#">Raspberry PI</a></li>
                <li><a href="#">VoCore</a></li>
                <li><a href="#">Banana PI</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Nano-Tech</li>
                <li><a href="#">AFM</a></li>
                <li><a href="#">STM</a></li>
                <li><a href="#">Nano-Tubes</a></li>
                <li><a href="#">Nano-Wires</a></li>
                <li><a href="#">Materials</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">A.I.</li>
                <li><a href="#">Artificial Intelligence</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">SaaS</li>
                <li><a href="#">On-Demand</a></li>
                <li><a href="#">No Software</a></li>
                <li><a href="#">Cloud Computing</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">On-Premise</li>
                <li><a href="#">Data Center</a></li>
                <li><a href="#">Hosting Environment</a></li>
                <li><a href="#">Internal IT</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Server-Side</li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">Java</a></li>
                <li><a href="#">Python</a></li>
                <li><a href="#">Ruby</a></li>
                <li><a href="#">ColdFusion</a></li>
                <li><a href="#">ASP.NET</a></li>
                <li><a href="#">GO</a></li>
                <li><a href="#">Perl</a></li>
                <li><a href="#">Lasso</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown menu-large">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a>          
          <ul class="dropdown-menu megamenu row">
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Web Design</li>
                <li><a href="#">HTML5</a></li>
                <li class="disabled"><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Web Development</li>
                <li><a href="#">Websites</a></li>
                <li><a href="#">Mobile Apps</a></li>
                <li><a href="#">Responsive</a></li>
                <li><a href="#">Web Apps</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Graphic Design</li>
                <li><a href="#">PSD</a></li>
                <li><a href="#">Images</a></li>
                <li><a href="#">Logos</a></li>
                <li><a href="#"></a></li>
                <li><a href="#">Vertical variation</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Database Design</li>
                <li><a href="#">Single button dropdowns</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">UI/UX Design</li>
                <li><a href="#">User Interface</a></li>
                <li><a href="#">User Experience</a></li>
                <li><a href="#">Web Designers</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Digital Marketing</li>
                <li><a href="#">Paid</a></li>
                <li><a href="#">Social</a></li>
                <li><a href="#">Content Marketing</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Project Management</li>
                <li><a href="#">Initiating</a></li>
                <li><a href="#">Planning</a></li>
                <li><a href="#">Executing</a></li>
                <li><a href="#">Monitoring</a></li>
                <li><a href="#">Controlling</a></li>
                <li><a href="#">Closing</a></li>
                <li><a href="#">PM Systems</a></li>
                <li><a href="#">Best Practices</a></li>
                <li><a href="#">Project Manager</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

Step 2 - mega-menu.css

Download the CSS below and include it in your web page

mega-menu.css

Step 3 - mega-menu.js

Add the JavaScript below to a file called mega-menu.js

$(document).ready(function() {
  jQuery(document).ready(function(){
    $(".dropdown").hover(
      function() { $('.dropdown-menu', this).stop().fadeIn("fast");
        },
      function() { $('.dropdown-menu', this).stop().fadeOut("fast");
    });
  });
}

Step 4 - Add the includes below to your web page

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="mega-menu.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="mega-menu.js"></script>

In this article, Solodev showed you how to add a mega menu to your website. You can customize the mega menu to suit your needs and style it to match the design of your website.

Download from Github

Share on Facebook Tweet It