La barra de menú es uno de los elementos clave en cualquier sitio web pues permite una navegación fluida, si es que este menú está correctamente diseñado y estructurado. De hecho, si se presentan problemas en tu barra de menú es probable que los usuarios terminen abandonando tu sitio. Y tal vez nunca se atrevan a visitarlo nuevamente pues la primera experiencia no ha sido del todo grata.
Una buena barra de menú debe tener una excelente estructura. Para ello, el sitio web debe tener una buena estructura. También se requiere que los elementos se encuentren organizados, que tengan un buen aspecto visual pues no queremos que los elementos de una barra de menú presenten problemas de legibilidad. Asimismo, dichos botones deben tener ciertos estados como parte de la micro-interacción entre los usuarios y el sitio web. Para ello, deberás hacer uso de CSS y jQuery para poder incluir elementos animados y diferentes estados en tu sitio web.
Si bien puedes crear tu barra de menú en HTML y modificarla por tu propia cuenta con CSS, puedes facilitar este proceso con alguno de los plugins jQuery gratuitos que te listamos a continuación. Todos ellos te permitirán crear barras de menú desplegables.
LazeeMenu
LazeeMenu te permite crear un menú vertical que puede contener enlaces, es decir, puedes crear un menú vertical con elementos desplegables. Aunque los menús desplegables suelen ser horizontales en su mayoría, si en tu layout es más conveniente emplear un menú vertical, puedes utilizar este plugin para crearlo.
booNavigation
booNavigation es un plugin jQuery para crear una barra de menú desplegable que admite hasta tres columnas. Puedes seleccionar entre dos efectos distintos cada vez que se abra el menú, también puedes controlar la velocidad en la que se abre el menú desplegable.
Bootsnav
Bootsnav is una cabecera multi-propósito que se ha desarrollado utilizando Boostrap. Con Bootsnav puedes crear todo tipo de menú, desde menús sencillos hasta menús desplegables. Asimismo, puedes crear menús horizontales y verticales, menús fijos, etc. Sin importar qué tipo de menú quieras crear, estamos seguro que puedes lograrlo con Bootsnav. Por supuesto, también tienes la opción de crear un mega menú para tu sitio web.
MegamenuJS
MegamenuJS, como su nombre indica, te permite crear mega menús. El plugin sólo hace uso de HTML y es inteligente pues si detecta que en realidad no necesitas un mega menú para todos los elementos, solo activará un menú desplegable.
MegamenuJS es de diseño responsive, se puede integrar con WordPress, es compatible en diversos navegadores y hace uso de jQuery para las animaciones.
Yamm
Yamm es otro plugin jQuery para Boostrap. Es ligero y hace uso del sistema de grillas fluido de Bootstrap 3. Funciona tanto en layout fijas como de diseño responsive y puedes incluir casi todos los elementos propios de Boostrap.
Con Yamm puedes crear un menú interactivo que admite tanto elementos de texto y enlaces, como imágenes, tablas y botones.
Dropit
Dropit es un plugin jQuery para crear menús desplegables de un solo nivel. Es simple y flexible, además funciona en diversos navegadores, incluyendo Internet Explorer 7 y posteriores.
Bootstrap Dropdown Hover
Bootstrap Dropdown Hover es un plugin sencillo que te permite activar los menús desplegables creados en Bootstrap no bien el cursor se posa sobre algún elemento. El desarrollador creo este plugin en vista de que no existía ninguno que no presentara ciertos problemas en su CSS o JavaScript, incompatibilidad con iOS y con navegadores modernos.
Responsive Menu
Responsive Menu es un plugin jQuery que te permite crear menús desplegables para sitios de diseño responsive. Incluye archivos en formato JavaScript, CSS y HTML.
Animated MegaDropdown
Animated MegaDropdown es un mega menú que, como su nombre indica hace uso de Animate CSS para incluir animaciones fluidas. Se ha desarrollado haciendo uso de JavaScript y CSS sólo si el navegador no acepta JavaScript. Funciona en Internet Explorer 7 y versiones posteriores.
GreedyNav
GreedyNav es un menú de navegación responsive que transforma los elementos comunes del menú a desplegables si es necesario. Es decir, te permite crear un menú responsive que se acomoda en diferentes tamaños de pantalla. En cuanto se detecta una pantalla de menor tamaño, los elementos del menú se organizarán de forma vertical y aparecerá un botón que sirve para activar el menú desplegable y poder ver todos los elementos que incluye.
Service.rlmenu.jquery
Service.rmlmenu.jquery es un plugin que te permite crear un menú responsive de varios niveles. Haciendo uso de queries en CSS, el menú se presenta de forma tradicional en pantallas grandes y como un menú popup en dispositivos con pantallas más pequeñas.
Dropdown Menus Enhancement
Dropdown Menus Enhancement, como su nombre indica, sirve para mejorar la funcionalidad de los menús desplegables. Se han añadido 4 elementos clave: sub-menús, compatibilidad con botones y casillas de verificación, viñetas y posicionamiento de menús.
Para aplicar cualquier de las mejoras mencionadas debes incluir los archivos modificados “dropdown-enhancement.js” y “dropdown-enhancement.css”.
Tendina
Tendina es un plugin jQuery sencillo de usar que te permite crear de forma rápida y sencilla menús desplegables laterales. Es ligero, posee opciones y características adicionales, es compatible con dispositivos móviles y puedes incluir un número infinito de elementos anidados.
jQuery-menu-aim
jQuery-menu-aim es un plugin para crear menús desplegables que pueden diferenciar entre las intenciones del usuario de colocar el cursor sobre un elemento del menú y revisar el contenido de un sub-menú. Se han inspirado en el menú de Amazon para su desarrollo.
jQuery-menu-aim detecta la dirección del ratón del usuario para poder aplicar transiciones rápidas al momento de navegar por el menú. Activa eventos cada vez que el usuario ingresa a un elemento del menú desplegable. También cabe destacar que este plugin asume que estás empleando un menú con submenús que se colocan al lado izquierdo del menú.
Makisu
Makisu es un plugin experimental en donde se crea un menú desplegable en 3D animado. En cuando pinchas sobre el menú, podemos ver como se va desplegando poco a poco como si se tratara de una estructura de papel. Si lo pinchas nuevamente, el menú regresa a su estado original.
La animación es bastante fluida y es bastante atractivo, pero poco funcional pues el menú tarda demasiado en aparecer del todo debido a todos los elementos que se encuentran dentro del desplegable.
En conclusión…
Aunque las barras de menú de un solo nivel son bastante comunes, en algunos sitios web donde existe una gran cantidad de contenido es necesario utilizar un menú desplegable. De hecho, estos menús pueden mejorar en gran medida la navegación en este tipo de sitios, así que te recomendamos utilizarlos si tu sitio web posee una gran cantidad de categorías y es necesaria la creación de menús y sub-menús.
