Esperamos que no leas este post con hambre porque, aunque vamos a hablar de hamburguesas, no nos referimos a las que se comen.
Porque este post trata sobre el menú de hamburguesa para páginas web.
¿Qué es? ¿Cuáles son sus ventajas? ¿Y sus inconvenientes? ¿Qué alternativas tienes? Todo eso y mucho más, son los temas que abarcamos en las siguientes líneas.
Un post que no te puedes perder (aunque quizás cuando termines, necesites comerte una).
Índice del artículo
En el ámbito de las páginas web, se conoce como menú de tipo hamburguesa a la forma en la que se representa el menú principal de navegación.
¿Y por qué se le conoce con ese nombre? La razón es su diseño, que consiste en 3 rayas horizontales y paralelas, que se asemeja a una hamburguesa entre 2 rebanadas de pan.
Su principal utilidad es la de representar el menú de cualquier tipo de web de tal manera, que ocupe muy poco espacio en pantalla.
Lo que permite mostrar mucho más contenido.
Por esa razón, (casi) todas las plantillas lo implementan en su versión para móviles.
Una vez explicado en qué consiste este tipo de menú, pasamos a contarte todo lo bueno y malo que puede aportar a tu web.
Porque aunque hoy en día sea un estándar, eso no significa que sea perfecto.
Ventajas
- Prioridad para el contenido: como hemos dicho antes, el menú son 3 rayas de la esquina y por tanto, es más fácil que las visitas se centren en tu contenido y no se distraigan con el menú.
- Muy reconocible: como la mayoría de plantillas web y aplicaciones lo usan, los usuarios saben lo que es.
- Aporta un diseño limpio y elegante: que tu página web luzca el mejor diseño posible es muy importante para tu posicionamiento web, y este tipo de menú ayuda a lograr una estética que atraiga más visitas.
Desventajas
- Oculta el menú: si para tu web el menú es muy importante, quizás no sea la mejor solución porque solo se mostrará si el usuario lo decide.
- Añade un clic más: siguiendo con el punto anterior, si el usuario quiere navegar por tu sitio, le obligas a hacer un clic (y hay quien no está dispuesto a eso).
- Puede ser (muy) incómodo: sobre todo para encontrar el contenido que buscas, en especial en menús muy grandes y con muchas subcategorías.
Como una imagen vale más que 1.000 palabras, a continuación te mostramos algunos ejemplos de menú de hamburguesa en la vida real.
Empezando por este blog que, como has podido ver en la imagen de más arriba, cuenta con este elemento en su versión mobile. 😉
1. Google Maps
La prueba de lo extendido que está este tipo de menú, es que el propio Google lo usa en su herramienta de mapas.
Y a pesar de lo que te hemos contado más arriba, aquí lo encontrarás también en su versión de escritorio.
Esto es porque como te hemos dicho en sus ventajas, este menú es ideal para dar la máxima prioridad al contenido y que ocupe más espacio.
Algo indispensable cuando queremos orientarnos en un mapa. 😉
2. Bootstrap
Sobre Bootstrap ya hablamos en nuestro post sobre los mejores programas para crear páginas web sin código.
Pero por si no lo conoces, se trata de uno de los frameworks más usados en todo el mundo para el diseño web, y la opción de empresas como Apple o la NASA.
Y aunque en su versión de escritorio mantiene el menú clásico, en cuanto que el ancho de la pantalla disminuye lo suficiente, lo cambia al menú de hamburguesa.
3. iLoveIMG
Esta web ya la recomendamos en nuestra guía de los mejores programas para comprimir imágenes online.
Pero en esta ocasión, también nos sirve de ejemplo para demostrar que el menú clásico y el de hamburguesa, pueden coexistir sin problemas.
Porque como podrás comprobar en su web, en la misma pantalla tienes las principales opciones de compresión (el menú principal) y en la esquina superior derecha, el icono de la hamburguesa (con más opciones).
Y lo mejor es que esta estructura se mantiene en cualquier tamaño de pantalla.
Es decir que no importa si entras desde el ordenador, tablet o teléfono móvil, siempre tendrás ambos menús a mano.
Si después de todo lo que te hemos contado te sigues haciendo esta pregunta, en este apartado intentaremos darte una respuesta.
Aunque para serte sinceros, en la mayoría de casos es recomendable usar este tipo de menú para tu página web o app.
Ten en cuenta que como te hemos dicho, hoy en día es un estándar del diseño y ese estatus, solo lo consigue aquello que es realmente útil.
Dicho eso, hay ocasiones en las que quizás no sea la mejor solución. En especial cuando la navegación en tu negocio online es parte indispensable.
En esos casos (dado que este tipo de menú la esconde) es mejor usar alguna de las alternativas al menú de hamburguesa.
Como por ejemplo, usar una barra con iconos en la parte superior (o inferior). O incluso una combinación de iconos y hamburguesa, donde muestras en todo momento los apartados más importantes con los primeros y dejas la ‘hamburguesa’ para ocultar las opciones menos relevantes.
Otras opciones que tienes son:
- Menú con scroll horizontal.
- Botones flotantes.
- Menú de tamaño adaptable.
- Menú desplegable.
- Usar pestañas en lugar de un menú.
Cualquier de ellas es una gran alternativa al menú de hamburguesa.
Ahora que lo conoces, solo te queda decidir si lo quieres en tu página web o no.
Y hablando de este tema, quizás te interese nuestro post con los mejores plugins de mega menú para WordPress.
Gracias a ellos, podrás combinar las ventajas del menú de hamburguesa, con un menú que ofrezca más opciones, facilite la navegación y te haga destacar frente a tu competencia.
¿Qué más se puede pedir?
