Menú desplegable con hover en Bootstrap

Menú desplegable con hover en Bootstrap

Para los programadores que hemos incursionado en el desarrollo de sitios web apoyándonos en el framework CSS Bootstrap desarrollado por Twitter, nos ha resultado algo molesto e incómodo que los menús desplegables no se activen al pasar el ratón sobre los mismos (hover). Así mismo, para ciertos usuarios puede ser igual de molesto que deban dar un clic sobre el menú para que se pueda desplegar el mismo.

Por ello Cameron Spear del sitio web cameronspear.com se dio a la tarea de desarrollar un plugin para solventar tal problema y lograr que los menus se desplieguen al hacer hover con el ratón y no al hacer clic. En este artículo veremos lo sencillo que es de implementar este plugin en nuestros desarrollos. Si deseas ver el artículo original (en inglés) puedes hacerlo en este link.

HTML

El marcado HTML de los menús debe permanecer intacto con la única diferencia de que se debe agregar el atributo data-hover="dropdown" al menú desplegable como se muestra a continuación:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
        Cuenta <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Mi Cuenta</a></li>
        <li class="divider"></li>
        <li><a href="#">Cambiar Email</a></li>
        <li><a href="#">Cambiar Password</a></li>
        <li class="divider"></li>
        <li><a href="#">Logout</a></li>
    </ul>
</li>  

Alternativamente se puede inicializar mediante JavaScript de la siguiente manera:

$('.dropdown-toggle').dropdownHover(options);

Puedes ver todas las configuraciones posibles en el repositorio en GitHub y como siempre espero que te haya sido de ayuda este artículo, dejes tus comentarios y lo compartas.

También debes tener en cuenta que el plugin es compatible tanto con Bootstrap 2 como con Bootstrap 3.

Comentarios

Deja tu comentario

http://