I have implemented my own hover event handler to display a triangle pointer and a horizontally aligned submenu bar. It works well for showing and navigating to the submenu when the top menu item is clicked. However, I am facing an issue where the submenu bar disappears when attempting to move the mouse to the submenu.
TIA
screenshot https://i.sstatic.net/TlOJU.png
Code:
$("#menubar li.dropdown>a.nav-link").hover(function() {
if ($("#menubar li.dropdown").filter(function() {
return $(this).data("show")
}).length === 0)
$(this).closest("li").addClass("active show");
},
function() {
/*when top menu is clicked, don't hide submenu*/
if ($("#menubar li.dropdown").filter(function() {
return $(this).data("show")
}).length === 0)
$(this).closest("li").removeClass("active show");
});
$("#menubar li>a.nav-link").on("click", function(e) {
e.stopPropagation();
var $li = $(this).closest("li");
if (!$li.hasClass("dropdown")) {
$("#menubar li.dropdown").removeClass("active show");
$("#menubar li.dropdown").data("show", false);
} else {
if ($li.data("show")) {
$li.removeClass("active show");
$li.data("show", false);
} else {
$("#menubar li.dropdown").removeClass("active show");
$li.addClass("active show");
$li.data("show", true);
}
}
});
$("#menubar ul.dropdown-menu>li>a").on("click", function(e) {
$("#menubar li.dropdown").removeClass("active show");
$("#menubar li.dropdown").data("show", false);
});#menubar ul {
height: 44px;
padding-top: 5px;
}
#menubar .nav-link {
font-size: 14px;
padding: 8px 50px 0 0 !important;
color: white !important;
}
#menubar .nav-link:focus,
#menubar .nav-link:hover,
#menubar .nav-link:visited {
color: white !important;
}
#menubar .navbar {
padding-left: 0 !important;
}
.navbar.navbar-dark {
height: 44px;
margin: 0 15%;
}
nav.navbar .navbar-nav li.nav-item.active:after {
content: "";
position: relative;
margin-left: -31px;
left: 50%;
bottom: 15px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
}
/*submenu*/
#menubar li.dropdown.show {
position: static;
}
#menubar li.dropdown.show .dropdown-menu {
display: table;
width: 100%;
text-align: center;
left: 0;
right: 0;
margin: 0;
}
.dropdown-menu>li {
display: table-cell;
padding-top: 6px;
}
.dropdown-menu>li a {
font-weight: 600;
}
.dropdown-menu>li a:hover {
text-decoration: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menubar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="menubar">
<ul class="nav navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="#">Menu1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">Menu2</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Submenu1</a></li>
<li><a href="#">Submenu2</a></li>
<li><a href="#">Submenu3</a></li>
</ul>
</li>
</ul>
</div>
</nav>