¿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.
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.
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.
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ú.
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.
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.
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.
