Los menús son una parte esencial de un sitio web, ya que nos permiten mejorar la experiencia del usuario al darle las respuestas de qué contenido encontrará y cómo llegar a él. Sin embargo, los menús pueden ocupar mucho espacio y no siempre los necesitamos activos. Por ello, en este post te enseñaremos cómo crear un menú de hamburguesa en CSS que permitirle al usuario ocultar y revelar nuestro menú según sus necesidades.
Crear un menú de hamburguesa en CSS y HTML
Para hablar sobre cómo crear un menú de hamburguesa en CSS, vamos a empezar con un podo de HTML. Un menú de hamburguesa es un estilo de menú en páginas web que se representa con tres líneas horizontales. Este icono quiere decir que hay un menú oculto que se revelará una vez hagamos clic. En nuestro caso, hemos creado un menú compuesto por una lista de enlaces y hemos situado este elemento en la barra de navegación. Puedes aprender cómo crear una barra de navegación en HTML leyendo nuestro post al respecto.
Ahora que tenemos la barra de navegación ubicada en el proceso de crear un menú de hamburguesa en CSS, necesitamos que nuestra lista de enlaces se oculte y revele para crear nuestro menú.
Hay muchas maneras de crear un menú de hamburguesa en CSS. En este post te enseñaremos cómo hacerlo usando un truco un poco diferente: insertar un formulario. Así es, para crear un menú de hamburguesa en CSS insertaremos un elemento HTML de formulario que solamente tiene dos estados. Para esto, insertamos un checkbox que puede estar marcado o desmarcado. Nuestro menú hamburguesa funcionará acorde al estado de este checkbox: si está marcado, se enseñará el menu de hamburguesas y, si está desmarcado, se ocultará.
Este elemento del menu de hamburguesas en español se inserta usando la etiqueta input con un tipo de checkbox y lo escribimos de la siguiente manera:
//crear un menú de hamburguesa en CSS
<input type= "checkbox">Esto creará una caja que podemos marcar y desmarcar. Sin embargo, también podemos crear un elemento label con el que podamos marcar y desmarcar la caja del menu hamburguesa pagina web. Esto lo hacemos otorgándole un atributo ID a nuestro checkbox e insertándolo en el label. Nosotros le hemos dado el atributo ID “burger”. Entonces, tendremos el código del checkbox (<input type= “checkbox” id= “burger”>) y el código del label (<label for=”burger”>).
Podremos usar este label más adelante para hacer que el icono de hamburguesa sea el que marque o desmarque nuestro checkbox oculto. Una vez pongamos nuestro icono real, podemos ocultar el checkbox usando su selector ID y otorgándole la propiedad display:none. Para esto, te recomendamos leer nuestro post sobre cómo crear un icono de hamburguesa en CSS.
Después de insertar estas etiquetas, podemos insertar la lista de enlaces que creamos en nuestra barra de navegación. Recuerda darle un atributo de clase a esta lista para que sea más fácil darle un estilo en CSS. Usaremos este atributo de clase para ocular y revelar nuestro menú hamburguesa usando su selector de clase.
Ocultar y revelar un menú hamburguesa en CSS
Una vez hayamos terminado de crear un menú de hamburguesa en CSS y HTML, es momento de que le demos un estilo. Este estilo es el que determinará si el menú se encuentra oculto o revelado. Para esto usaremos el selector de clase que hemos llamado “.menu” y que selecciona nuestra lista de enlaces.
Para crear el estado “inactivo” u oculto de nuestro menú de hamburguesa CSS, insertamos el selector de .menu y le otorgaremos la propiedad “display:none”. Como aprendimos en nuestro post sobre la propiedad display en CSS, esta variable hará que el elemento se oculte. Después de insertar esto, usaremos el atributo ID del checkbox y el atributo de clase del menú para crear el estado “activo” o revelado. Ya que el menú es un hermano inmediato del checkbox, podemos seleccionarlo usando el selector avanzado de hermanos adyacentes (+). En nuestro blog puedes conocer más acerca de los selectores avanzados en CSS.
Además, podemos seleccionar nuestro checkbox “burger” específicamente cuando está marcado usando la pseudoclase “:checked”. Entonces, el selector “#burger: checked + .menu” nos permitirá dar estilos a nuestra lista de enlaces cuando el checkbox se encuentra marcado. Una vez tengamos este elemento seleccionado, le podemos otorgar la propiedad display:block. Esto hará que nuestra lista de enlaces sea visible en la página web. Como este selector es más específico que el selector .menu, el navegador sobrescribirá la regla de display:none cuando el checkbox esté activado.
Una vez tengas la función de ocultar y revelar tu lista de enlaces, te invitamos a leer nuestro post sobre cómo dar estilo a un menú en CSS. Con el que podrás seguir trabajando en tu menú de hamburguesa CSS.
¿Te animas a seguir aprendiendo?
Ahora que sabes cómo crear un menú de hamburguesa en CSS y HTMl, ¡ha llegado el momento de que pongas estos lenguajes en práctica! En KeepCoding sabemos que tus ganas de seguir aprendiendo sobre desarrollo web crecen con cada post que lees. Por ello, te invitamos a nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp. En él, entre muchas otras cosas, como la teoría del lenguaje HTML y CSS para la creación de sitios web. Al final, crearás tu propia página web usando todos los conocimientos adquiridos. ¡No te lo pierdas, solicita más información y apúntate ahora para continuar con tu formación!
