I am looking to customize the default Bootstrap navbar component and transform it into a drill-down navigation specifically for mobile devices. To achieve this, I have incorporated some JavaScript code to modify my menu.
Currently, I am using the following code: https://codepen.io/cray_code/pen/dENeKM
While it works perfectly on mobile, I am encountering an issue where the menu opens after a click instead of triggering on hover when viewed on desktop.
Below is the code snippet intended for desktop viewport:
$('.mega-menu-trigger').bind('click' ,function(e){
e.preventDefault();
var current = $(this).next('.mega-menu');
$('.mega-menu-trigger').not(this).removeClass('active');
$(this).toggleClass('active');
$('.mega-menu').not(current).removeClass('open').addClass('closed');
if( !current.hasClass('open') ){
current.removeClass('closed').addClass('open');
} else {
current.removeClass('open').addClass('closed');
}
});
In an attempt to switch from click to hover interaction, I tried modifying the code to use mouseenter like so:
$('.mega-menu-trigger').bind(mouseenter: function(e){
However, this adjustment did not yield the desired outcome as the menu would remain open even after moving away from the link. I suspect that utilizing mouseleave is necessary, but I am unsure on how to implement it effectively.
Is there a recommended solution to transition the menu behavior from click-based to hover-based?