This CSS code snippet helps you to create a mega menu for Bootstrap projects. It extends the Bootstrap native navbar with a mega dropdown menu.
How to Create Bootstrap Mega Menu With Css
First of all, load the following assets into the head tag of your HTML document.
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css'>
Create the HTML structure as follows:
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- Mobile toggle button -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Logo -->
<a class="brand" href="#"><b>LOGO</b></a>
<!-- Navigation -->
<nav class="nav-collapse collapse">
<ul class="nav">
<li><a href="#top">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Mega Menu <b class="caret"></b></a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-column">
<ul>
<li class="nav-header">Mega menu 1</li>
<img src="http://placehold.it/150x120">
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Mega menu 2</li>
<img src="http://placehold.it/150x120">
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Mega menu 3</li>
<img src="http://placehold.it/150x120">
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
</ul>
</li>
</ul><!-- dropdown-menu -->
</li><!-- /.dropdown -->
<li><a href="#about">About Us</a></li>
<li><a href="#pricing">Our Pricing</a></li>
<li><a href="#team">Our Team</a></li>
<li><a href="#contact">Contact</a></li>
</ul><!-- /.nav -->
</nav><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.nav-inner -->
</header>
Style the mega menu using the following CSS styles:
/* page style */
a, a:focus, a:active, a:hover, object, embed { outline: none; text-decoration: none; }
:-moz-any-link:focus { outline: none; }
input::-moz-focus-inner { border: 0; }
:focus { outline: 0; }
body { background: #333; }
.brand { padding: 10px 40px !important; }
.navbar { border-bottom: 4px solid #888; }
/* MEGA MENU STYLE
********************************/
.mega-menu {
padding: 10px 0px ! important;
width: 540px;
border-radius: 0;
margin-top: 0px;
}
.mega-menu li {
display: inline-block;
float: left;
font-size: 0.94rem;
padding: 3px 0px;
}
.mega-menu li.mega-menu-column {
margin-right: 20px;
width: 150px;
}
.mega-menu .nav-header {
padding: 0 !important;
margin-bottom: 10px;
display: inline-block;
width: 100%;
border-bottom: 1px solid #ddd;
}
.mega-menu img { padding-bottom: 10px;}
/* Disable Toggle style
********************************/
/* Dropdown Toggle on style */
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
background: inherit; /* Set to inherit when using mouse hover to open dropdown */
color: inherit;
}
/* Toggle off style */
.navbar .nav li.dropdown.open.active > .dropdown-toggle,
.navbar .nav > li.dropdown > a:focus {
background: inherit;
color: inherit;
}
/* Toggle hover */
.navbar .nav li.dropdown > .dropdown-toggle:hover,
.navbar .nav li.dropdown.open > .dropdown-toggle:hover {
background-color: #DDDDDD;
}
/* Toggle caret*/
.navbar .nav li.dropdown > .dropdown-toggle .caret {
border-bottom-color:;
border-top-color:;
}
/* Toggle caret hover */
.navbar .nav li.dropdown > a:hover .caret,
.navbar .nav li.dropdown > a:focus .caret {
border-bottom-color: #333;
border-top-color: #333;
}
/* Toggle caret active */
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-bottom-color:#333;
border-top-color: #333;
}
/* Hover style
********************************/
.navbar .nav > li > a, .mega-menu a
{
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
/* -webkit-transform: translate3d(0, 0, 0); Webkit Hardware Acceleration*/
-webkit-backface-visibility: hidden; /* Safari Flicker Fix #2 */
-webkit-transform: translateZ(0);
}
Now, load the jQuery and Bootstrap by adding the following CDN links before closing the body tag:
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js'></script>
Add the following JavaScript function:
// Dropdown Menu Fade
jQuery(document).ready(function(){
$(".dropdown").hover(
function() { $('.dropdown-menu', this).fadeIn("fast");
},
function() { $('.dropdown-menu', this).fadeOut("fast");
});
});
That’s all! hopefully, you have successfully created Bootstrap Mega Menu. If you have any questions or suggestions, feel free to comment below.
