El icono de hamburguesa es un símbolo muy conocido en el diseño web. Aunque puedes descargar un icono cualquiera de la web, en este post te enseñaremos cómo crear el icono de hamburguesa en CSS desde cero y por qué es útil hacerlo así.
¿Qué es el icono de hamburguesa en CSS?
El icono de hamburguesa es un símbolo que representa que, al clicar en él, aparecerá un menú escondido. Este símbolo es muy común en páginas web y su fama permite que el usuario sepa automáticamente en dónde encontrar los menús escondidos. El menú de hamburguesa se suele representar con tres rayas horizontales, pero cada página web encuentra la manera de adaptarlo a sus necesidades.
Aunque puedes utilizar el icono que quieras para crear tu menú de hamburguesa, te recomendamos mantenerte en esta línea estética, pues es lo que el usuario ya conoce. Desviarnos de este conocimiento puede afectar la experiencia de usuario sin darnos una ganancia real.
A continuación, te enseñamos cómo crear un icono de hamburguesa en CSS con tres rayas horizontales, una encima de otra.
Cómo crear el icono de hamburguesa en CSS
Para crear el icono de hamburguesa en CSS te proponemos una metodología un poco diferente. En nuestro caso, utilizaremos las propiedades de sombras y posicionamiento en CSS.
Una vez hemos creado el checkbox para poder abrir y cerrar el menú en una página web, es el momento de diseñar cómo se verá el recuadro encima del checkbox. Para esto, estilizaremos el seudoelemento ::before que se encuentra justo antes del checkbox. Recordemos que, para estilizar un seudoelemento ::before o ::after, primero debemos otorgarle una propiedad content. Esta propiedad puede estar vacía, lo importante es que exista dentro del elemento.
Ahora que tenemos el seudoelemento creado, podemos crear una propiedad box-shadow para crear las líneas horizontales. A esta propiedad podemos darle los valores 0 10px 0 0, que representan que la sombra tiene una distancia vertical de 10px frente al contenido, que no se ve porque no tiene ningún otro valor.
Recuerda que no veremos ningún elemento en nuestro navegador hasta que le otorguemos un ancho y alto al contenido. En nuestro caso, hemos puesto que el width es de 25px y el height es de 3px, lo que creará una línea delgada horizontal.
Para crear más líneas horizontales del mismo tamaño, basta con agregar sombras en la propiedad box-shadow con distintos valores de distancia vertical. Siguiendo nuestro ejemplo, podrías escribir “box-shadow: 0 3px 0 0, 0 10px, 0 0, 0 17px 0 0” para que las tres líneas tengan una distancia igual entre ellas.
En las propiedades del seudoelemento también podemos insertar un color. No hay reglas sobre los colores de los menú hamburguesa; elige el color que funcione mejor con tu página web.
Finalmente, le daremos a este seudoelemento una propiedad position: absolute. Como el seudoelemento es hijo de un elemento .burger-icon, tiene una posición dentro de nuestra barra de navegación y el elemento hijo (::before) tomará como referencia la posición del elemento padre. Es decir, la posición que le demos no se tomará desde la esquina superior izquierda del viewport, sino de la esquina superior izquierda del elemento icon.
¿Por qué usar este método?
Sabemos que la forma más fácil no es crear un icono de hamburguesa en CSS, sino descargar uno gratuito de la web. Incluso podríamos crear las líneas horizontales con otros métodos que no incluyan sombras. Sin embargo, queremos introducirte al mundo de posibilidades que tiene el diseño en CSS. Este programa no sirve para aplicar diseños a elementos en HTML, también puede crear iconos y diseños desde cero.
Esto lo puedes ver en la página web con dibujos animados de los Simpsons, hechos completamente en CSS. Queremos hacer énfasis en lo poderoso que es CSS y, por ello, te invitamos a explorar el diseño de iconos usando sus herramientas. Además de fortalecer tus conocimientos, diseñar directamente en el programa te da la libertad de cambiar el diseño directamente desde tu código, en vez de tener que diseñar y rediseñar en un programa externo.
¿Qué sigue?
Ahora que sabes cómo crear tu propio icono de hamburguesa en CSS, ¡es hora de que lo pongas en práctica en tu propia web! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. Allí, entre muchas otras cosas, seguirás aprendiendo sobre CSS y usarás estos conocimientos para crear y diseñar tu propia página web. ¡Matricúlate!
