Puede sonar sabroso, pero el botón de la hamburguesa no contiene nada que valga la pena comer. En cambio, este símbolo de tres líneas contiene opciones de menú que ayudan a que los diseños de las páginas web sean más limpios y fáciles de navegar mientras ocupan menos espacio en la página.
Ahora, una característica famosa en sitios web de todo el mundo, hay un debate en curso sobre los beneficios y los posibles inconvenientes de este botón de hamburguesa en el diseño web.
Entonces, en esta guía, profundizaremos en los detalles y colocaremos un botón de hamburguesa debajo de la parrilla: ¿Qué es exactamente un botón de hamburguesa? ¿Para qué sirve? ¿Por qué molestarse con este estilo de botón y cómo crearlo en CSS? Sumerjámonos.
¿Qué es un botón de hamburguesa?
El botón de hamburguesa, llamado así por su parecido visual con un artículo de supermercado, es un tipo de botón común en sitios web y aplicaciones, especialmente en entornos móviles. Es un icono que consta de tres líneas horizontales paralelas, a menudo redondeadas en los extremos.
Los botones de hamburguesa generalmente se colocan en la esquina superior de la interfaz de usuario. Cuando se presiona, el botón revela un menú previamente oculto (también conocido como «menú de hamburguesas»). Este menú puede «expandirse» desde la ubicación del botón, aparecer modal o deslizarse desde la parte superior, lateral o inferior de la pantalla.
El objetivo principal del botón de hamburguesa es ahorrar espacio en la pantalla ocultando los elementos de navegación. El icono en sí es pequeño y sugiere una lista oculta que se puede mostrar con un clic o una pulsación.
La historia del botón de hamburguesa
Botón de hamburguesa se remonta a 1981 cuando el diseñador Norm Cox hizo un trabajo para la estación de trabajo personal de Xerox. Probó otras iteraciones, incluida la flecha hacia abajo, la estrella y el símbolo más, pero ninguna ofreció tanta facilidad de uso como este simple ayudante de hamburguesas.
Los usuarios entendieron rápidamente el concepto: hacer clic en un botón para mostrar un menú desplegable para navegar o vincular a funciones. Sin embargo, aparte del lanzamiento inicial en Xerox, los diseñadores realmente no se molestaron con la hamburguesa, hasta que Twitter comenzó a usarla en 2008. Apareció en iOS un año después, y hoy en día es un elemento básico del diseño web, ya que a menudo aparece en la esquina superior izquierda o derecha de las páginas web y proporciona un fácil almacenamiento para menús más grandes.
Aspectos y desventajas del panecillo con botones de hamburguesa
No todos se comercializan como botones de hamburguesas en los sitios web. Los críticos dicen que este bollo está exagerado, al ver problemas como:
- Falta de versatilidad – A pesar del amplio conocimiento, no todos los usuarios saben qué es un botón de hamburguesa o qué hace, lo que hace que sea poco probable que hagan clic para ver otras opciones del sitio.
- Bajo compromiso – Las barras de navegación con íconos de menú claros son fáciles de ver, reconocer y usar. Los botones de hamburguesa no se destacan y no obtienen el mismo nivel de participación del usuario.
- Irrelevante – Los discursos de hamburguesas hacen que todo lo que hay detrás de la hamburguesa no sea tan importante como todo lo demás en tu página, de lo contrario terminará en la primera página.
Pero también hay beneficios al implementar menús de bollos en su sitio, que incluyen:
- Apariencia limpia – El botón de hamburguesa ocupa casi poco espacio, por lo que puede colocarlo fácilmente en cualquier parte de la página sin distraer su atención de otros elementos clave. Los usuarios saben cómo se ve, lo que significa que puede dedicar más tiempo y esfuerzo a otros elementos de diseño.
- Función consistente – Este menú de tres líneas hace una cosa y una cosa muy bien. Esto lo convierte en una gran adición a la consistencia en el diseño web: aunque puede que no sea llamativo, ofrece una funcionalidad sólida.
- Un objetivo claro – No todo pertenece a la página de inicio de su sitio web. El menú de hamburguesas proporciona un lugar predefinido para los elementos de navegación que no son una prioridad pero que vale la pena tener a mano.
Ejemplos de botones de hamburguesa
Los botones de hamburguesa están por todas partes en la web: aquí hay algunos ejemplos para mostrar cómo se verían.
Botón de hamburguesa en la aplicación de Android
Comencemos con el ejemplo estándar de un menú de hamburguesas en la aplicación. La pantalla de inicio de la aplicación Gmail se ve así: observe el botón de hamburguesa en la esquina superior izquierda.
El menú se desliza desde la izquierda cuando toca el icono.
Botón de hamburguesa para sitio web
Luego, la marca de alimentos Pipsnacks usa de manera creativa el menú de hamburguesas en su sitio web móvil. Mientras se carga la página, el botón se muestra en la esquina superior izquierda de la pantalla.
Al tocar el icono, aparece el menú de navegación que parece desplegarse en la parte superior de la pantalla. Este es un efecto divertido e inteligente que agrega estilo a su sitio de manualidades y permite a los usuarios móviles sumergirse en él.
Botón de hamburguesa creativa
También hay muchas iteraciones creativas de botones de hamburguesas que puede encontrar en línea si desea agregar una pizca de detalle adicional. Aquí hay un excelente ícono de botón animado del usuario de CodePen, Danilo: intente hacer clic en el ícono en el ejemplo a continuación y vea qué sucede.
ver la pluma menú animado por Daniela (@DaniLo06) en CódigoPen.
Cómo hacer un botón de hamburguesa usando CSS
Afortunadamente, crear un botón de hamburguesa en CSS no es demasiado complicado. Si prefiere crear código CSS en un editor independiente, pruebe opciones como RapidCSS o estilizador. RapidCSS es rápido, liviano y adecuado para usuarios con cierta experiencia en CSS. El estilizador ofrece más formato GUI e incluye opciones de vista previa instantánea para garantizar que el código que escriba produzca los resultados que desea.
Si prefiere codificar en la plataforma, una de las opciones más fáciles es WordPress. Primero, inicie sesión en su cuenta, busque «Apariencia» en la barra lateral izquierda y luego haga clic en «Personalizar».
Desplácese hasta la parte inferior del nuevo menú a la izquierda y seleccione «CSS adicional».
Finalmente, verá una página de editor de CSS que le permite ingresar y probar su código CSS antes de colocarlo en su sitio.
Ahora es el momento de construir esta hamburguesa. Digamos que quieres construir un ícono estático. De acuerdo a Escuelas W3es mejor comenzar con HTML:
Este código forma la base de su botón de hamburguesa.
Luego agrega tu código CSS:
El resultado es un botón de hamburguesa estático estándar que, cuando se hace clic, lo lleva al menú.
Icono de botón de hamburguesa dinámica de cocina usando CSS
Si desea probar algo un poco más complicado, considere el botón de menú animado que se convierte en un icono de «cancelar» cuando se hace clic. Así es como comienza:
Haga clic para abrir el menú y cambiará a:
¿Beneficios aquí? Los usuarios no solo acceden al menú basado en hamburguesas, sino que también entienden cómo hacer que desaparezca usando una «X» universal para cancelar.
Para preparar esta opción dinámica, comience con el código HTML:
Ahora agrega tu CSS:
Finalmente, agrega algo de JavaScript:
Construyendo un botón de hamburguesa sin código
Por supuesto, no todo el mundo quiere dedicar tiempo y esfuerzo a crear un botón de hamburguesa en el que los usuarios puedan hacer clic. Algunos propietarios de sitios web simplemente no se sienten cómodos con la codificación CSS y HTML, mientras que otros prefieren priorizar la creación de contenido o los diseños de la página de inicio.
Si lo prefiere, considere los creadores de sitios web que ofrecen opciones de hamburguesas integradas.
1. Centro CMS
Con CMS Hub, puede crear un excelente sitio web que se adapte a sus necesidades y capture su mercado objetivo. Asegúrese de que todo funcione según lo previsto con la supervisión del tráfico y la integración de campañas de marketing. Los botones de hamburguesa son estándar.
2. Espacio cuadrado
Diseñe diseños limpios y frescos con las plantillas de Squarespace y use sus sencillos menús de hamburguesas para almacenar opciones de navegación de segundo nivel.
3. Nodo de red
40 millones de usuarios crearon sitios con Webnode: agregue o cambie contenido con solo unos pocos clics y personalice rápidamente la ubicación y las opciones desplegables de cualquier menú de hamburguesas.
4. Sitio web123
Simple es el nombre del juego para este creador de sitios web. Site123 no es elegante: es gratis y facilita la integración de su menú de hamburguesas en el diseño de su sitio web.
Matandolo
No a todo el mundo le gusta el botón de hamburguesa.
Que tiene sentido; los menús pueden causar confusión o colocar opciones de navegación críticas fuera del alcance. Pero también hay ventajas para las hamburguesas: crear su propio botón o usar un creador de sitios le permite decidir dónde ese menú tiene el mayor impacto y le brinda un control total sobre la navegación de su sitio.
Nota del editor: esta publicación se publicó originalmente en mayo de 2020 y se actualizó para que sea completa.
