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.
For detailed instructions, view Solodev's How to Add a Mega Menu to your Website article.
Try out a working example on JSFiddle.
The mega menu has the following basic HTML markup.
<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 row">
<li>
<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>
All required CSS is in mega-menu.css
This tutorial contains the following third party resources.
<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>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent