Nowadays, most of the rich content websites use the mega menu to help the users to navigate the site’s content more easily. A mega menu contains various navigational items including dropdowns, story updates, and slides, etc. The “4ECPs MegaMenu” such a mega menu with images slider that is built with Bootstrap and jQuery.
Basically, this is a horizontal menu bar with a brand logo, dropdown, and mega dropdown navigation. The mega dropdown contains four columns with full width. Inside columns, there is an image carousel, navigational links, featured post, and call to action. You can customize these elements with additional CSS according to your needs.
Moreover, the menu is built with Bootstrap 3 native dropdowns, carousel, and columns components. Likewise, Glyphicons used in the menu for different elements. So, it doesn’t come with any other heavy JavaScript or CSS files.
How to Create Mega Menu with Images Slider
First of all, load the Bootstrap CSS, Google fonts, and Mega Menu CSS into the head tag of your website. The Google fonts are optional, you can use or exclude this file.
<!-- Bootstrap CSS --> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <!--Google Fonts--> <link href='https://fonts.googleapis.com/css?family=Sintony:400,700&subset=latin-ext' rel='stylesheet' type='text/css'> <!-- Mega Menu CSS --> <link rel="stylesheet" href="css/style.css">
After that, create the HTML structure for the mega menu as follows. Place your site logo inside the "navbar-brand" tag. Similarly, place your slide images indie the div element that has “myCarousel” id and classes name “carousel slide”.
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#main-navbar">
<span class="sr-only">Toggle navigation</span>
<span style="color:black;">Menu</span>
</button>
<a class="navbar-brand" href="#">4ECPs MegaMenu</a>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Request Appointment</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Small Dropdown <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Andrew's Uber Menu <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">New in Stores</li>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="https://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>Summer Floral</small></h4>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> CTA HERE</button>
</div>
<!-- End Item -->
<div class="item">
<a href="#"><img src="https://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
<h4><small>Gold Sandals</small></h4>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> CTA HERE</button>
</div>
<!-- End Item -->
<div class="item">
<a href="#"><img src="https://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
<h4><small>Denin Jacket</small></h4>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> CTA HERE</button>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
</div>
<!-- /.carousel -->
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
<li><img class="img-responsive menu-images" src="https://placehold.it/100x100"</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Dresses</li>
<li><a href="#">Default Navbar</a></li>
<li><a href="#">Lovely Fonts</a></li>
<li><a href="#">Responsive Dropdown </a></li>
<li><a href="#">Default Navbar</a></li>
<li><a href="#">Lovely Fonts</a></li>
<li><a href="#">Responsive Dropdown </a></li>
<li class="dropdown-header">Tops</li>
<li><a href="#">Good Typography</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Jackets</li>
<li><a href="#">Easy to customize</a></li>
<li><a href="#">Glyphicons</a></li>
<li><a href="#">Pull Right Elements</a></li>
<li class="dropdown-header">Pants</li>
<li><a href="#">Coloured Headers</a></li>
<li><a href="#">Primary Buttons & Default</a></li>
<li><a href="#">Calls to action</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<!--Image Card-->
<div class="card hoverable">
<div class="card-image">
<div class="view overlay hm-white-slight z-depth-1">
<img src="https://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-responsive" alt="">
<a href="#">
<div class="mask waves-effect"></div>
</a>
</div>
</div>
<div class="card-content">
<li class="dropdown-header">Card title</li>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id amet, quisquam modi nobis nostrum iusto incidunt dolore assumenda delectus officia quia, sequi eum perspiciatis architecto. Ullam voluptatum, facere nihil quidem.</p>
</div>
<!--Buttons-->
<div class="card-btn text-center">
<a href="#" class="btn btn-primary btn-md waves-effect waves-light">Read more</a>
<a href="#" class="btn btn-default btn-md waves-effect waves-light">Buy now</a>
</div>
<!--/.Buttons-->
</div>
<!--Image Card-->
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>
</div>
Now, load the jQuery and Bootstrap JS file by adding the following CDN links before closing the body tag.
<!-- jQuery --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <!-- Bootstrap --> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
Finally, initialize the Bootstrap dropdowns in the jQuery document ready function. You can also use the click function to open the dropdowns on the click event. Similarly, you can set a custom value for the duration of fadeIn and fadeOut animation.
jQuery(document).ready(function () {
$(".dropdown").hover(
function () {
$('.dropdown-menu', this).fadeIn(300);
},
function () {
$('.dropdown-menu', this).fadeOut(300);
});
});
That’s all! I hope you have successfully implemented this jQuery mega menu with images. If you have any questions or suggestions let me know by comment below.