Menú hamburguesa: ¿Qué es y Cómo hacer uno? [Ejemplos]

que es menu hamburguesa como hacer uno ejemplos

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.

¿Qué es el menú hamburguesa? Significado

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.

que es menu hamburguesa

Ventajas del menú hamburguesa 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.

Desventajas del menú hamburguesa web

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.

Ejemplos de menús hamburguesa

Te enseño un ejemplo de menú hamburguesa en escritorio, app y móvil.

Menú hamburguesa en escritorio

ejemplo de menu hamburguesa web en escritorio

Así se ve desplegado el menú:

ejemplo de menu hamburguesa web desplegado en escritorio
Imagen extraída de Google Drive

Menú hamburguesa en app

ejemplo de menu hamburguesa en app web

Así se ve desplegado el menú:

ejemplo de menu hamburguesa desplegado en app
Imagen extraída de Google Drive

Menú hamburguesa en móvil

ejemplo de menu hamburguesa en movil

Así se ve desplegado el menú:

ejemplo menu hamburguesa desplegado en movil
Imagen extraída de Economiatic

¿Cómo crear un menú hamburguesa?

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»

como hacer un menu hamburguesa elementor

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» 

opcion anadir nueva 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

tipo de plantilla nombre de plantilla y crear plantilla

4. Escoge la estructura para el header

elige la estructura para el header

5. Escribe Â«Nav menu» en la barra de búsqueda que se encuentra en la izquierda

nav menu en la barra de busqueda elementor

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»

pasos finales hacer menu hamburguesa elementor

8. El menú hamburguesa está hecho, ahora puedes personalizarlo a tu gusto en las diferentes secciones.

¿Dónde coloco el menú hamburguesa: en la izquierda o derecha de la esquina superior?

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?

Scroll al inicio