menu Hover - Bsale-IO/template-docs GitHub Wiki

En bootstrap 4 no es posibile hacer hover en elementos dropdown, para dar soporte a este requerimiento se desarrollo el siguiente script.

Estructura de menú requerida

Para que funcione es necesario contar con un menu que contenga las clases menu-expand-sm, menu-expand-md, menu-expand-lg, menu-expand-xl y los elementos de dropdown

<div class="menu-expand-lg">
...
<div class="dropdown">
   <a class="dropdown-toggle">...</a>
   <div class="dropdown-menu">...</div>
</div>
...
</div>

Estructura de menú requerida

Pegar este script con el archivo modificaciones.js

/*
Menu Hover 
------------------------
para funcionar necesita utilziar 
- clase navbar-expand-[sm,md,lg,xl] segun bootstrap
- dropdown de bootstrap 4

*/

// define tamaño de pantalla donde estará activo el hover depende de clase navbar-expand-[sm,md,lg,xl]
var navbarExpand = document.querySelector("[class*='navbar-expand-']");
if(navbarExpand){
    var mediaQuery = window.matchMedia(setMedia(navbarExpand.classList)); //tamaño pantalla

    function setMedia(classList){
        //devuelve el valor del breakpoint
        if(classList.contains("navbar-expand-xl")){     return "(hover: hover) and (min-width:1200px)";
        }else if (classList.contains("navbar-expand-lg")){return "(hover: hover) and (min-width:996px)";
        }else if  (classList.contains("navbar-expand-md")){return "(hover: hover) and (min-width:768px)";
        }else if (classList.contains("navbar-expand-sm")){return "(hover: hover) and (min-width:576px)";
        }
    }
    
    function openMenu(e){
        //abre menú
        e.target.classList.add("show")
        e.target.querySelector(".dropdown-menu").classList.add("show")
    }
    
    function closeMenu(e){
        //cierra menu 
       e.target.classList.remove("show")
       e.target.querySelector(".dropdown-menu").classList.remove("show")
    }
    
    function menuHover(media){
        //activa eventos de hover 
        var dropdown = navbarExpand.querySelectorAll(".dropdown");
        
        if(media.matches){
            for(i = 0; i<dropdown.length;i++){
               dropdown[i].addEventListener("mouseenter",openMenu, true);
               dropdown[i].addEventListener("mouseleave",closeMenu, true);
            }
        }else{
           for(i = 0; i<dropdown.length;i++){
               dropdown[i].removeEventListener("mouseenter",openMenu, true);
               dropdown[i].removeEventListener("mouseleave",closeMenu, true);
            } 
        }
    }
    //ejecuta al cargar     
    menuHover(mediaQuery)
    //ejecuta cuando cambia de tamaño la pantalla
    mediaQuery.addListener(menuHover)
}//Menu Hover :fin
⚠️ **GitHub.com Fallback** ⚠️