En el diseño web responsive es muy frecuente realizar el conocido como menú hamburguesa, el cual recibe su nombre por el relativo parecido que tiene el típico icono con 3 barras con el famoso manjar habitual de restaurantes de comida rápida.
El menú hamburguesa es un icono de tres líneas horizontales que se utiliza en el diseño web para representar un menú desplegable en dispositivos móviles o pantallas de tamaño reducido.
Al hacer clic en el icono de la hamburguesa, el menú desplegable se expande, mostrando las opciones de acceso que pueden estar ocultas en una barra de navegación en parte superior de la página en pantallas más grandes.
Aunque para lograr la típica funcionalidad de estos menús se suele recurrir al uso de JavaScript, con un poco de ingenio es posible implementar uno de estos menús solo con HTML5 y CSS3.
Este post es para mostrar la posibilidad de hacerlo simplemente con CSS, sin usar imágenes ni JavaScript. ¿Magia? ¿Brujería?
Implementación de un menú hamburguesa con HTML y CSS
Para implementar un menú hamburguesa en HTML y CSS, necesitas entender dos aspectos fundamentales:
- Uso de un input de tipo checkbox: Este input nos ayudará a controlar si el menú está visible o no.
- Uso del selector de hermanos generales: Utilizaremos este selector para reflejar el estado del checkbox en el menú.
Es importante que el checkbox y el menú sean hermanos en la jerarquía del HTML, y que el checkbox aparezca antes en el código.
Estructura HTML del menú hamburguesa
El HTML del menú hamburguesa consta de varios elementos esenciales:
En este código, el input de tipo checkbox controla la visibilidad del menú. Utilizamos elementos para representar los iconos de las barras del menú y la "X" de cierre. El nav contiene la lista de elementos del menú.
Estilo CSS del menú hamburguesa
El CSS define los estilos visuales y de diseño del menú:
Con estos estilos, logramos crear un menú hamburguesa funcional y atractivo. La transición suave entre los iconos de menú y la animación del menú al abrirse y cerrarse mejoran la experiencia del usuario.
Antes de empezar es importante remarcar que, para este ejemplo, voy a usar la hoja de estilos reset.css como base, y los iconos de Font Awesome para los dibujos que vamos a necesitar (las 3 barrás para desplegar el menú, y el aspa para cerrar el menú). Si bien el reset.css es opcional, los iconos de Font Awesome son fundamentales para este ejemplo.
Tal y como se puede observar, el input de tipo checkbox y el nav con la lista de enlaces del menú, son hermanos.
En este código vemos que aparece en varios sitios el valor 48px. Este valor viene a ser el tamaño del icono de la hamburguesa. Gracias al selector de de hermanos generales (~) podemos hacer que cuando el input esta en estado :checked, se muestre el nav, y cuando no se encuentra en dicho estado, el menú se oculte.
La otra parte de la magia sucede gracias a position: absolute;, que nos permite colocar los iconos justo encima del checkbox.
Para este menú utilizaremos position:fixed. Con position:fixed y las propiedades top y bottom haremos que nuestro menú ocupe toda la pantalla verticalmente y podamos moverlo sin que influya en los otros elementos de nuestra web.
El primer span vamos a rotarlo 45 grados con traslate para moverlo ligeramente y quede perfecto. En el caso del tercer span seguiremos la misma dinámica pero la rotación tendrá un valor negativo.
¿Recuerdas qué habíamos escondido nuestro menú hamburguesa con left:-300px? Es hora de mostrarlo.
Como hacer MENÚ HAMBURGUESA ANIMADO + SORPRESA | HTML - CSS - JS
Implementar un menú hamburguesa utilizando solo HTML y CSS es una excelente manera de practicar tus habilidades de diseño web y entender los conceptos básicos de la interactividad en la web.
A partir de aquí puedes hacer múltiples variantes a tu gusto o necesidad para adaptarlo al diseño de tu web.
En el diseño web moderno, los menús suelen ser responsivos, lo que significa que se adaptan a diferentes tamaños de pantalla y dispositivos.
Asegúrate de que el icono de la hamburguesa sea claramente visible y fácil de identificar.
Proporciona una indicación clara de que el icono de la hamburguesa es un menú desplegable.
Asegúrate de que el menú hamburguesa esté fácilmente accesible.
Usa el menú hamburguesa solo en dispositivos móviles o en pantallas de tamaño reducido.
Empléalos con moderación.
El menú hamburguesa es una opción popular y útil para la navegación en dispositivos móviles y pantallas pequeñas en el diseño web. Si se utiliza adecuadamente, puede ser una solución efectiva para organizar y presentar opciones de navegación en un espacio limitado.
Los menús de tu sitio web pueden ser simples o complejos, dependiendo de la cantidad de opciones de navegación que se ofrezcan.
Si te gustó este truco sobre el diseño del menú hamburguesa, seguramente también te interesará aprender más sobre desarrollo web.
tags: #menu #hamburguesa #css #sin #javascript