Los menú de hamburguesa son una forma de dar al usuario la posibilidad de ocultar o revelar el menú de un sitio web. Como todos los elementos de una página web, hay muchas formas de crearlos, darles estilo y ubicarlos. En este post, te enseñaremos cómo ubicar un menú de hamburguesa con Flexbox, un sistema de disposición de elementos de CSS.
Un menú de hamburguesa es un tipo de menú identificado comúnmente por un icono de tres rayas horizontales. A diferencia de los menús que están fijos en un costado del sitio web, en este caso el usuario puede ocultarlo y revelarlo al hacer clic sobre el icono.
En otros posts te hemos enseñado cómo crear un menú de hamburguesa e incluso a crear el icono de hamburguesa usando las sombras de CSS. Además, te hemos enseñado cómo dar estilo a un menú de hamburguesa y ubicarlo en tu página web usando el posicionamiento clásico de CSS. Pero en KeepCoding sabemos que los lenguajes de programación tienen muchas maneras de crear una misma función y, para que puedas aprenderlas todas y emplear la que más se adapte a lo que buscas, en esta ocasión te enseñaremos cómo ubicar un menú de hamburguesa con Flexbox, otro método de posicionamiento de elementos en CSS.
Antes de comenzar, recuerda darle un atributo de clase a la lista de enlaces o menú. Esto hará que el diseño en CSS sea más sencillo, pues podemos usar el selector de clase para insertar propiedades y ubicar un menú de hamburguesa con Flexbox. En nuestro caso, le hemos dado el nombre de «navbar-list».
Lo primero que debes hacer para ubicar un menú de hamburguesa con Flexbox es insertar la propiedad display: flex a tu elemento, en nuestro caso al .navbar-list. Recuerda que esto lo debes hacer para todos los elementos que quieres ubicar usando Flexbox, pues solo así el navegador sabrá que, a la hora de ubicar el elemento, debe aplicar las reglas flex.
Una vez cambies tu display a flex, los textos de tu menú se ajustarán al eje principal. Esto quiere decir que se pegarán todos, intentando ser parte de una misma fila. Recuerda que esto sucede porque la dirección por defecto de Flexbox es row, la cual ordena los elementos de izquierda a derecha. Te invitamos a hacer un repaso de las direcciones de Flexbox en nuestro post sobre la propiedad flex-direction.
En el caso de nuestro menú de hamburguesa, queremos que los elementos estén ordenados en el eje vertical. Para esto, insertamos la propiedad flex-direction: column. Esto hará que las secciones de nuestro menú se pinten de arriba abajo. Solo con este cambio, hemos vuelto al orden de nuestro menú.
Otra función con la que podemos jugar a la hora de ubicar un menú hamburguesa con Flexbox son las propiedades de espaciados o propiedades gap. En este caso, podemos usar la propiedad gap, que une las propiedades row-gap y column-gap, para determinar las brechas entre filas y columnas. Como en nuestro menú hay una sola columna, basta con poner un solo valor para determinar la propiedad row-gap. Recuerda que mientras el valor sea positivo, puedes utilizar cualquier unidad de medida. Puedes hacer un repaso acerca de estos valores en nuestro post sobre las unidades de medida de CSS.
En nuestro caso, le hemos dado un valor de .5 rem, porque no queremos un espaciado tan grande entre los nombres de las secciones. Este es el estilo más común para un menú hamburguesa vertical. Sin embargo, también podrías utilizar la propiedad justify-content: space-between si quisieras que el espacio entre las secciones se divida proporcionalmente para que el menú ocupe el largo de la pantalla.
Puedes leer nuestro post sobre la propiedad justify-content de Flexbox y explorar las demás opciones que tiene para alinear los elementos dentro de un contenedor (flex-end, flex-start, center, space-between, space-around y space-evenly). También puedes explorar las opciones de la propiedad align-items de Flexbox, que funciona de manera muy similar a justify-content, solo que en el eje transversal.
Flexbox es un sistema de disposición de elementos con muchas opciones y propiedades. Por ello, ubicar un menú de hamburguesa con Flexbox se puede ver de muchas maneras. Te recomendamos leer la guía completa de Flexbox para conocer todas las propiedades y jugar con ellas en tu propio menú.
¿Qué sigue ahora?
Ubicar un menú de hamburguesa con Flexbox nos demuestra que los lenguajes de programación tienen muchas maneras de hacer lo mismo, es cuestión de encontrar la que mejor funcione en cada caso particular. ¿Y qué mejor manera de encontrar nuestro estilo de programación que en un bootcamp intensivo que combina la teoría con la práctica? En nuestro Desarrollo Web Full Stack Bootcamp, combinarás los conocimientos teóricos sobre los lenguajes de programación con la creación y diseño de tu propio sitio web. En pocos meses, no solo serás un experto en desarrollo web, sino que además tendrás un producto que lo confirma. ¡Apúntate!
