En el diseño web moderno, especialmente para dispositivos móviles, el menú de navegación suele ocultarse por razones de espacio y solo se muestra al hacer clic en el icono de hamburguesa. Este tipo de navegación, que se despliega como un overlay, es un estándar actual en la industria.
Estructura del proyecto
Algunas personas utilizan JavaScript para dotar de funcionalidades al botón y que, al ser presionado, muestre u oculte el menú. Sin embargo, es posible lograrlo mediante CSS. Un truco para generar toda la estructura HTML de forma muy rápida es escribir ! en el editor de CodePen.
Con la estructura inicial lista, debemos definir el marcado del menú. Es fundamental tener en mente el diseño final; intenta definir los elementos HTML que lo conforman. Recuerda que, en CodePen, lo que escribes en el editor HTML se inserta dentro de las etiquetas <body>.
Configuración y estilos CSS
Las variables en CSS se declaran por lo general dentro del selector :root para que sean globales. En este caso, definí los tres colores que usaré en todo el menú dentro de este selector.
El siguiente paso es restablecer los valores de los elementos, ya que los navegadores tienden a incluir algunos estilos por defecto. Es una práctica común aplicar CSS que normalice los estilos para que sean consistentes en todos los navegadores:
- normalize.css: para estandarizar el comportamiento.
- reset.css: para eliminar márgenes y paddings predeterminados.
Interacción y lógica del menú
La etiqueta <input type="checkbox">, como ya viste en el HTML, es el elemento clave que nos da la posibilidad de jugar con los iconos. Por otro lado, los iconos SVG suelen ser demasiado grandes, así que cambiamos su tamaño y el color al blanco definido en las variables iniciales.
Lógica de visualización
Para hacer el menú visible y posicionarlo, utilizamos la pseudo-clase :first-child. Sabiendo esto, podemos decir que si el checkbox está seleccionado, el elemento ul.nav__menu li (nuestra lista de ítems) debe cambiar su display a block.
| Elemento | Estado | Acción |
|---|---|---|
| Checkbox | Checked | Mostrar menú (display: block) |
| Iconos (SVG) | Default | Ajuste de color y tamaño |
Prueba tu código
Si te gusta utilizar estas herramientas, te ofrezco dos opciones para probar el menú que hemos maquetado:
- CodePen: ideal para iterar rápidamente.
- CodeSandbox: una alternativa robusta si prefieres un entorno tipo IDE.
CARTA DE MENU HAMBURGUESA EN WORD
tags: #hamburguesa #menu #lateral #codepen