Bootstrap 5 navbar with dropdown and mega menu hover effect
We know about dropdowns and multilevel dropdowns. But some of the eCommerce websites have a mega submenu. We will show large inner menus on hover on each dropdown item, similar to eBay or Alibaba websites. In other words, When you hover on any menu item of the dropdown menu, another large submenu will appear next to it. These kinds of large dropdowns mostly used for e-commerce websites.
Steps to create a responsive dropdown with a large submenu
– Create a navbar with a dropdown menu.
– Add another dropdown-menu after the dropdown-item element (inside li of first level dropdown-menu)
– Add your own class for the second-level dropdown menu, Let’s add classmegasubmenu.
– Now we need to make second level dropdown-menu a bit larger and also set its position to left:100%; top:0; and also sizing min-height: 100%; min-width:500px;
– Show it on mouse hover with CSS
– .dropdown-menu > li:hover .megasubmenu{ display: block; }
The final step is to make it adaptive for mobile devices. Just a few javascript codes
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="htmlcss bootstrap aside menu, vertical, sidebar nav menu CSS examples" />
<meta name="description" content="Bootstrap 5 sidebar navigation menu example" />
<title>Bootstrap navbar Bootstrap dropdown large submenu. html code example</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<!-- ======= Icons used for dropdown (you can use your own) ======== -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav{
background: yellow;
}
.megasubmenu{ padding:1rem; }
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
.megasubmenu{
left:100%; top:0; min-height: 100%; min-width:500px;
}
.dropdown-menu > li:hover .megasubmenu{
display: block;
}
}
/* ============ desktop view .end// ============ */
</style>
<script type="text/javascript">
window.addEventListener("resize", function() {
"use strict"; window.location.reload();
});
document.addEventListener("DOMContentLoaded", function(){
/////// Prevent closing from click inside dropdown
document.querySelectorAll('.dropdown-menu').forEach(function(element){
element.addEventListener('click', function (e) {
e.stopPropagation();
});
});
// make it as accordion for smaller screens
if (window.innerWidth < 992) {
// close all inner dropdowns when parent is closed
document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown){
everydropdown.addEventListener('hidden.bs.dropdown', function () {
// after dropdown is hidden, then find all submenus
this.querySelectorAll('.megasubmenu').forEach(function(everysubmenu){
// hide every submenu as well
everysubmenu.style.display = 'none';
});
})
});
document.querySelectorAll('.has-megasubmenu a').forEach(function(element){
element.addEventListener('click', function (e) {
let nextEl = this.nextElementSibling;
if(nextEl && nextEl.classList.contains('megasubmenu')) {
// prevent opening link if link needs to open dropdown
e.preventDefault();
if(nextEl.style.display == 'block'){
nextEl.style.display = 'none';
} else {
nextEl.style.display = 'block';
}
}
});
})
}
// end if innerWidth
});
// DOMContentLoaded end
</script>
</head>
<body>
<header class="section-header py-4 text-center">
<div class="container">
<h1>dropdown large submenu.</h1>
</div>
</header> <!-- section-header.// -->
<div class="container-fluid p-0">
<!-- ============= header start ============== -->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Mega submenu </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 2 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 3 </a></li>
<li class="has-megasubmenu">
<a class="dropdown-item" href="#"> Dropdown item 4 » </a>
<div class="megasubmenu dropdown-menu">
<div class="row">
<div class="col-6">
<h6 class="title">Title Menu One</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div><!-- end col-3 -->
<div class="col-6">
<h6 class="title">Title Menu Two</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div><!-- end col-3 -->
</div><!-- end row -->
</div>
</li>
<li class="has-megasubmenu">
<a class="dropdown-item" href="#"> Dropdown item 5 » </a>
<div class="megasubmenu dropdown-menu">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 6 </a></li>
</ul>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Menu item </a> </li>
<li class="nav-item"><a class="nav-link" href="#"> About </a></li>
<li class="nav-item"><a class="nav-link" href="#"> Services </a></li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
<li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Dropdown right </a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
<li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
</ul>
</li>
</ul>
</div> <!-- navbar-collapse.// -->
</div> <!-- container-fluid.// -->
</nav>
<!-- ============= header end============= -->
<section class=" py-5">
<h1>Demo for Navbar with megamenu dropdown. <br> Based on Bootstrap 5 CSS framework. </h1>
<p>For this demo page you should connect to the internet to receive files from CDN like Bootstrap5 CSS, Bootstrap5 JS</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div><!-- container // -->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
/////// Prevent closing from click inside dropdown
document.querySelectorAll('.dropdown-menu').forEach(function(element){
element.addEventListener('click', function (e) {
e.stopPropagation();
});
})
});
// DOMContentLoaded end
</script>
</body>
</html>