El menú hamburguesa o menú hamburguesa web, es un icono que se utiliza abundantemente en sitios web y apps que, al hacerle clic o tocarlo, muestra un menú oculto.
Absorbe más conocimiento sobre los menús hamburguesa deslizando.
El menú hamburguesa es un icono que se usa en sitios web y aplicaciones que, cuando se lo presiona, despliega una lista de enlaces web.
Se lo denomina como menú hamburguesa porque tiene un gran parentesco con el popular alimento:
- Sus tres rayas horizontales y la forma en que se presentan tienen similitud con el pan, carne, pan de la hamburguesa
Lo puedes hallar tanto en versiones móviles como escritorios (más adelante observa ejemplos reales)
¿Cómo se llama el menú hamburguesa?
Otras formas con las que se llama el menú hamburguesa son:
- Barra triple
- Burger menú
- Icono de la barra triple
- Icono de hamburguesa
- Botón de hamburguesa
- Icono menú hamburguesa
¿Quién creó el menú de hamburguesas?
El menú hamburguesa fue creado por Norm Cox en 1981. Su primera aparición fue en la interfaz gráfica de usuario, Xerox Star.
Lectura recomendada: ¿Qué es el footer de un sitio web?
Estas son algunas ventajas del menú hamburguesa:
1. Ahorra espacio
El menú hamburguesa ahorra espacio al ser pequeño. Con su implementación se logra «guardar» enlaces que podrían estar estrechamente esparcidos en la cabecera de la web.
2. Brinda organización
Al ser capaz de ocultar los enlaces, hace que todo se vea más limpio y organizado en el sitio. Además, los enlaces que incluyas en el menú pueden estar organizados de la forma que prefieras.
3. Es bastante reconocido por los usuarios de internet
Aunque la mayoría de los usuarios no tengan claro cuál es el nombre de este icono, está bastante claro que lo pueden reconocer fácilmente como uno de los elementos de navegación en el sitio.
Estas son algunas desventajas del menú hamburguesa:
1. Exige más tareas para el usuario
Con el menú hamburguesa el usuario tiene que realizar más tareas. Por ejemplo:
Jorge aterriza a un sitio web en el que debe localizar el menú hamburguesa y hacer clic sobre él. Después tiene que visualizar la lista de los enlaces para ver cuál quiere y, finalmente, presionar sobre la página que desea.
Lo anterior demanda más acciones por parte de los navegantes, por lo que puede afectar en sus respectivos compromisos.
2. Puede no ser reconocido
Si bien el menú hamburguesa es popular en la red, todavía existe la posibilidad de que no todos sepan de qué se trata o para qué sirve.
Por ejemplo, si el público de un sitio web es de edad vieja, el reconocimiento del menú hamburguesa (y su utilidad) no les será, al menos inicialmente, sencillo. Lo que producirá poca interacción con este tipo de menú.
3. Podrían pasarlo por alto
Al esconder las páginas detrás de un menú hamburguesa, es posible que los visitantes primerizos del sitio las pasen por alto y se vayan sin prestarles atención.
Te enseño un ejemplo de menú hamburguesa en escritorio, app y móvil.
Menú hamburguesa en escritorio
Así se ve desplegado el menú:
Menú hamburguesa en app
Así se ve desplegado el menú:
Menú hamburguesa en móvil
Así se ve desplegado el menú:
Existen varias maneras para crear un menú hamburguesa, por ejemplo, una es usando plugins como WP Mobile Menú o WP Responsive Menú.
Aquí otras formas de realizar un menú tipo hamburguesa:
Cómo hacer un menú hamburguesa en HTML Y CSS
Es posible empezar un menú hamburguesa empleando código HTML y CSS. Por aquí dejo un recurso que te será útil:
Cómo hacer un menú hamburguesa con Elementor
Si utilizas Elementor Pro, sigue estos pasos para iniciar un menú hamburguesa:
1. Dirígete al menú de la parte izquierda de WordPress, ubícate en la sección «Plantillas» y haz clic en «Theme Builder»
2. Se abrirá una ventana en la cual debes escoger la opción «Añadir nueva» que se encuentra en la parte superior a lado de «Maquetador de temas»
3. Elige la opción «Header» en el apartado «Tipo de plantilla», créale un nombre a la plantilla y da clic en «Crear plantilla», seguidamente mira si deseas una plantilla prediseñada o cierra la ventana
4. Escoge la estructura para el header
5. Escribe «Nav menu» en la barra de búsqueda que se encuentra en la izquierda
6. Arrastra y suelta el bloque a la sección del header en el que deseas integrarlo.
7. En la sección «Contenido» localiza «Layout» y en la izquierda del mismo abre el desplegable y elige la opción «Dropdown»
8. El menú hamburguesa está hecho, ahora puedes personalizarlo a tu gusto en las diferentes secciones.
Esto no es un factor crucial. De hecho, no pensaría tanto en que lado debe estar el menú hamburguesa, pero si quieres una «regla» a seguir, te la dejo:
Si la audiencia de tu sitio lee y escribe de izquierda a derecha, sería interesante colocar el menú hamburguesa en la esquina superior izquierda porque es probable que lo vean inmediatamente por intuición.
Sí, en cambio, el público objetivo del sitio lee y escribe de derecha a izquierda, podrías ubicar el menú en la esquina superior derecha (por el mismo motivo pasado)
Lo que te menciono no es más que una «regla» que podría ser ignorada. Al final, existen grandes sitios con excelentes rendimientos que no tienen el menú ubicado en el lado que leen y escriben sus usuarios.
No te rompas la cabeza por este detalle.
Conclusión
El icono menú hamburguesa es casi visto en todas las web, ya sean construidas en WordPress o en otro CMS, así que si lo usas sin pensar previamente en otros estilos de navegación es comprensible.
Se suele seguir la corriente.
¿Conocías todo esto acerca del menú hamburguesa web?
Sobre el autor
- Fundador y redactor de contenidos en Pleybast. Apasionado por el mundo de los sitios web.