Bootstrap 4 Responsive Multilevel Navbar Plugin – bootstrap-menu

Menu & Nav
File Size: 2.16 KB
Views Total: 1215 views
Last Update:January 18, 2022
Publish Date: March 25, 2021
Official Website: Go to website
License: MIT
Plugin Author: vosidiy
Demo    Download

A Free jQuery Plugin with bootstrap-menu is Bootstrap 4 Responsive Multilevel Navbar Plugin. Bootstrap navbar dropdown with hover effect, It is light weight bootstrap 4 menu plugin. you can target to navigation menu with media break points. it is fully compatible with bootstrap 4 any versions. You can add simply hover animations on mouse hover. this menu plugin auto response hover to click function when you open desktop & mobile/Tab devices.

How To Use :

Add jQuery Library after add Bootstrap 4 css & js Library in HTML page :

<script src="/cdn/jquery-1.12.4.min.js"></script>
<!-- Bootstrap files (jQuery first, then Popper.js, then Bootstrap JS) -->
<link href="/cdn/bs4/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="/cdn/bs4/bootstrap.min.js" type="text/javascript"></script>

Add HTML basic code snippets :

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
	<li class="nav-item active"> <a class="nav-link" href="#">Home </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>
	<li class="nav-item dropdown">
	   <a class="nav-link  dropdown-toggle" href="#" data-toggle="dropdown">  More items  </a>
	    <ul class="dropdown-menu">
		    <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.// -->
</nav>

Add bootstrap 4 CSS for Desktop Break Point :

/* ============ desktop view .end// ============ */
	@media (min-width: 992px){
		.dropdown {
			    margin: 0;
		}
		.dropdown:hover >.dropdown-menu{
			display: block;
		}
		.dropdown-menu > li:hover > .submenu {
	    	display: block;
		}
		.dropdown-menu .dropdown-toggle:after{
			border-top: .3em solid transparent;
		    border-right: 0;
		    border-bottom: .3em solid transparent;
		    border-left: .3em solid;
		}

		.dropdown-menu .dropdown-menu{
			margin-left:0; margin-right: 0;
		}

		.dropdown-menu li{
			position: relative;
		}
		.nav-item .submenu{ 
			display: none;
			position: absolute;
			left:100%; top:-7px;
		}
		.nav-item .submenu-left{ 
			right:100%; left:auto;
		}

		.dropdown-menu > li:hover{ background-color: #f1f1f1 }
		.dropdown-menu > li:hover > .submenu{
			display: block;
		}
	}

Add JQuery Script for hover & responsive :

<script type="text/javascript">
/// some script

// jquery ready start
$(document).ready(function() {
	// jQuery code

	//////////////////////// Prevent closing from click inside dropdown
    $(document).on('click', '.dropdown-menu', function (e) {
      e.stopPropagation();
    });

    // make it as accordion for smaller screens
    if ($(window).width() < 992) {
	  	$('.dropdown-menu a').click(function(e){
	  		e.preventDefault();
	        if($(this).next('.submenu').length){
	        	$(this).next('.submenu').toggle();
	        }
	        $('.dropdown').on('hide.bs.dropdown', function () {
			   $(this).find('.submenu').hide();
			})
	  	});
	}
	
}); // jquery end
</script>


Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.