Menú hamburguesa

menu hamburguesa

¿Una hamburguesa de ternera con patatas y un refresco con hielo? En realidad no. Al menos aquí, cuando te hablamos del menú hamburguesa nos referimos a un tipo de menú propio del diseño web. Como pasa con todos los elementos del diseño de los sitios, los menús pueden tomar muchas formas diferentes en función de las necesidades. Y el menú hamburguesa se ha convertido en uno de los más icónicos del momento.

Qué es el menú hamburguesa en UX

El menú hamburguesa en UX es una clase de menú de contenidos representado por tres rayas horizontales, lo que le proporciona el típico aspecto de una hamburguesa de pan-filete-pan. La esencia de este menú es su capacidad para mantener ocultos los contenidos hasta el momento en el que el usuario clica en él y, con ello, los despliega ante sí. En este sentido, es particularmente útil para páginas web que prioricen la calidad de la navegación. Por eso triunfa tanto en la actualidad.

que es el menu hamburguesa en ux

Dónde encontrarlo en una página web

No existe una regla para la colocación del menú hamburguesa en las páginas web. No obstante lo habitual es encontrarlo emplazado en la esquina superior derecha de las mismas, así como de las aplicaciones. La razón es sencilla: es la zona de la pantalla más cercana al pulgar. Y con esto hemos dado una pista clave: este es un menú particularmente explotado por los sitios web para dispositivos móviles.

Ventajas y desventajas de este tipo de menús

Entre las ventajas del menú hamburguesa en el diseño web está la optimización de la navegación, un mayor espacio para colocar otros contenidos y un minimalismo estético. Entre las desventajas, está que el usuario puede no interpretar esa hamburguesa como un menú y sentirse desorientado. En cualquier caso, eso es cada vez menos habitual por la propia habituación de los usuarios con este tipo de menú.

Pasos para crear un menú hamburguesa en una web

Existen diferentes mecanismos para implementar un menú hamburguesa en un sitio web. Todo depende del tipo de desarrollo web que hayas implementado. Para la inclusión de un menú hamburguesa en HTML, por ejemplo, deberás usar una hoja de estilos reset.css como base, así como iconos de Font Awesome para crear los dibujos del menú que introducirás en tu web. Entremos en detalles.

pasos para crear un menu hamburguesa

Código HTML del menú hamburguesa


Para implementar un menú hamburguesa en HTML se necesita, en primer lugar, usar un input de variedad checkbox que permita saber cuándo el menú está visible y cuándo no. En segundo lugar, se debe emplear el selector de hermanos generales para lograr que el estado del checkboz se refleje en el menú.
Esto es muy importante para que el menú se mantenga compacto o extendido según el click de los usuarios. Además, también tienes que asegurarte de que el checkbox aparezca antes en el HTML. En este lenguaje, las jerarquías son determinantes para alcanzar los resultados que se necesitan. Siempre.

Diseñar este tipo de menú con CSS

Posteriormente es necesario aplicar el código de CSS que dará al menú el aspecto que deseamos. Aquí debes tener en cuenta algo clave: si deseas cambiar el valor de tamaño del icono del menú de hamburguesa, hazlo en todos los sitios en los que aparezca ese valor. De lo contrario el resultado será deficiente.

Menú hamburguesa en WordPress

En el caso de que tu sitio web haya sido desarrollado con WordPress, lo tienes mucho más fácil para aplicar un menú hamburguesa. Primero, porque muy probablemente la plantilla de diseño que estás usando tenga el menú hamburguesa WordPress como alternativa. Solo debes marcarlo e incluirlo.

Segundo, porque si tu plantilla de diseño no lo incorpora, puedes instalar alguno de los plugins WordPress que sí lo hacen como Responsive Menu, WP Mobile Menu o WP Responsive Menu.