dropdown-with-mega-menu

Bootstrap 5 Navbar with Dropdown and Mega Menu

Spread the love

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 &raquo; </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 &raquo; </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>

Bootstrap 5 Navbar with Dropdown with Mega Menu Download.



Spread the love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *