Menú desplegable con hover en Bootstrap

Menú desplegable con hover en Bootstrap
  • Eborio Linárez
  • July 11, 2013
  • 0

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 post veremos lo sencillo que es de implementar este plugin en nuestros desarrollos. Si deseas ver el artículo original (en inglés) puedes encontrar el enlace al final del post.

Si descargas una plantilla desarrollada en Bootstrap para utilizarla en tu sitio web lo más probable es que ya tenga implementado el plugin.

Veamos el plugin en funcionamiento en el siguiente ejemplo.

See the Pen Menú desplegable con hover en Bootstrap by Eborio Linárez (@eborio) on CodePen.

HTML

Lo primero que debes hacer es incluir el plugin justo después de haber incluido el script de Bootstrap tal como se muestra a continuación:

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/bootstrap-hover-dropdown.min.js"></script>

Luego debes modificar el menú agregando el atributo data-hover="dropdown". Veamos un ejemplo del marcado.

<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);

El plugin permite la configuración de algunos parámetros como el delay de despliegue por ejemplo. Si deseas ver como utilizarlos te invito a visitar el repositorio en GitHub del plugin que puedes encontrar en los enlaces al final del post.

Gracias por leer el artículo y espero te sea de utilidad este plugin para activar los menús desplegables de tu sitio web desarrollado en Bootstrap con el hover del ratón. No olvides compartirlo.

Comparte en las redes sociales

Comentarios

Aún no hay comentarios. Sé el primero en comentar.

Deja un comentario