En el diseño 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. Aprender cómo hacer un menú hamburguesa en HTML y CSS no es una tarea tan compleja.
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. Veamos cómo hacer un menú hamburguesa en HTML y CSS.
Cómo hacer un menú hamburguesa en HTML y CSS: implementación
El truco para realizar la funcionalidad de este tipo de menú hamburguesa reside en dos aspectos clave:
- Uso de un input de tipo checkbox: Para saber cuándo el menú está visible o no.
- Uso del selector de hermanos generales: Para lograr que el estado del checkbox se refleje en el menú.
La segunda condición tiene una importante implicación, y es que resulta imprescindible que el checkbox y el menú sean hermanos en la jerarquía del HTML y, además, el checkbox aparezca antes en el HTML.
Estructura HTML del menú hamburguesa
El HTML del menú hamburguesa consta de varios elementos clave que interactúan para lograr la funcionalidad deseada. En primer lugar, se utiliza un input de tipo checkbox para controlar el estado del menú, es decir, si está abierto o cerrado. Este input actúa como el interruptor que activa o desactiva el menú al ser marcado o desmarcado.
Además del input checkbox, se utilizan elementos <i>, una de las etiquetas en HTML, para representar los iconos de las barras de menú y la “X” de cierre del menú. Estos iconos son necesarios para indicar visualmente al usuario la función del menú y proporcionar una experiencia de usuario más intuitiva.
Dentro del NAV en HTML, se encuentran los elementos <ul> y <li> que representan los elementos de la lista del menú. Estos elementos constituyen los enlaces o ítems del menú que el usuario puede seleccionar para navegar por el sitio web.
//cómo hacer un menú hamburguesa en HTML y CSS
<div class="respmenu">
<input type="checkbox">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
<nav>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</nav>
</div>Estilo CSS
El CSS del menú hamburguesa define los estilos visuales y de diseño que determinan la apariencia y el comportamiento del menú. Es importante destacar que se utilizan técnicas de posicionamiento absoluto y ocultamiento selectivo para mostrar u ocultar el menú según el estado del input checkbox.
Los estilos CSS también se aplican a los iconos de las barras de menú y la “X” de cierre para asegurar una presentación adecuada y consistente en diferentes dispositivos y navegadores.
Además, se utilizan transiciones CSS para animar la apertura y cierre del menú, lo que mejora la experiencia de usuario al proporcionar un efecto visual suave y atractivo.
//cómo hacer un menú hamburguesa en HTML y CSS
/* Estilos básicos para el menú */
.respmenu a {
color: inherit;
text-decoration: none;
display: block;
padding: 10px 20px;
border-bottom: 2px solid #456789;
max-width: 200px;
background: #234567;
font-variant: small-caps;
text-shadow: 1px 1px black;
}
//cómo hacer un menú hamburguesa en HTML y CSS
/* Posicionamiento y visibilidad del checkbox y los iconos */
.respmenu input[type="checkbox"],
.respmenu .fa-bars,
.respmenu .fa-times {
position: absolute;
box-sizing: border-box;
margin: 0;
padding: 0;
right: 0;
top: 0;
width: 48px;
height: 48px;
}
//cómo hacer un menú hamburguesa en HTML y CSS
/* Estilo de los iconos de menú y cierre */
.respmenu .fa-bars,
.respmenu .fa-times {
font-size: 48px;
pointer-events: none;
}
/* Ocultar el checkbox */
.respmenu input[type="checkbox"] {
opacity: 0;
}
//cómo hacer un menú hamburguesa en HTML y CSS
/* Estilos del menú */
.respmenu {
color: white;
position: relative;
background: #123456;
min-height: 48px;
}
/* Mostrar el menú al hacer check en el checkbox */
.respmenu input:checked ~ nav {
display: block;
}
//cómo hacer un menú hamburguesa en HTML y CSS
/* Cambiar el icono a la "X" al abrir el menú */
.respmenu input:checked ~ .fa-bars {
display: none;
}
/* Cambiar el icono a las barras al cerrar el menú */
.respmenu input:not(:checked) ~ .fa-times {
display: none;
}Implementar un menú hamburguesa con HTML y CSS es una tarea accesible para cualquier desarrollador web, incluso sin experiencia en JavaScript. Con un buen entendimiento de los principios básicos de HTML y CSS, así como de las técnicas de diseño responsivo, es posible crear menús modernos y funcionales que mejoren la navegación en dispositivos móviles y pantallas de tamaño reducido.
Si te gustó este truco sobre el diseño del menú hamburguesa, seguramente también te interesará aprender más sobre desarrollo web. ¡No dudes en explorar el resto de nuestros artículos para seguir aprendiendo!
¡Anímate a aprender más sobre desarrollo web y descubre todo lo que puedes lograr con el Bootcamp en desarrollo web de KeepCoding! Con nuestra formación, podrás dominar las habilidades necesarias para ingresar al apasionante mundo de la tecnología y transformar tu vida profesional.
