Cómo hacer un menu hamburguesa en HTML y CSS
Una de las tendencias más populares en diseño web en la actualidad es el uso del menú hamburguesa. ¿Pero qué es exactamente un menú hamburguesa en un sitio web?
Se trata de un tipo de menú que permite guardar opciones de navegación en un solo botón, generando una experiencia más limpia y concisa para el usuario.
Este tipo de menús se ha popularizado gracias a su fácil implementación en código HTML y CSS. En este artículo, te explicaremos paso a paso cómo crear un menú hamburguesa para tu página web.
Los menús hamburguesa reciben su nombre debido a su similitud con una hamburguesa, con los ingredientes escondidos en el pan de arriba. En este caso, los ingredientes son las opciones de navegación que se despliegan al hacer clic en el botón.
Este tipo de menús se han convertido en una tendencia en diseño de páginas web gracias a su simplicidad y su capacidad para guardar espacio en la pantalla, algo muy importante en la era de los dispositivos móviles.
Requisitos previos
Antes de comenzar a crear el menú hamburguesa, es importante tener ciertos conocimientos básicos en HTML y CSS. Si no los tienes, te recomendamos revisar tutoriales y cursos en línea para familiarizarte con el lenguaje y la estructura del código.
También necesitarás un editor de texto simple, como Notepad o Sublime Text. Si ya tienes un software de edición web como Dreamweaver, también puedes usarlo para seguir los pasos de este artículo.
Para crear el menú hamburguesa en HTML, necesitaremos tener una estructura básica de página web que incluya los elementos necesarios para el menú. Aquí te mostramos un ejemplo de código HTML que puedes utilizar:
<nav> <div class="logo"> // Aquí puedes insertar tu logo o imagen </div> <div class="menu-btn"> <div class="btn-line"></div> <div class="btn-line"></div> <div class="btn-line"></div> </div> <div class="menu"> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Acerca de</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Contacto</a></li> </ul> </div> </nav>
Explicación del código
En este código, se crea un elemento `nav`, que indica que se trata de una barra de navegación. Dentro de este elemento, se encuentran tres `div`: uno para el logo o imagen de tu página web, otro para el botón del menú hamburguesa y el último para el menú en sí.
Dentro del `div` del botón del menú, hay tres elementos `div` más, cada uno con la clase "btn-line". Estos elementos serán los que conformen las tres líneas horizontales características de los menús hamburguesa.
Dentro del `div` del menú, se encuentra una lista desordenada (`ul`) con cuatro elementos `li`, cada uno con un enlace (`a`) a una página o sección de tu página web. Puedes modificar estos elementos según las necesidades de tu página.
Una vez que tenemos la estructura básica del menú en HTML, es hora de aplicarle estilos con CSS para lograr el efecto hamburguesa.
/* Estilo para el botón hamburguesa */
.menu-btn {
display: flex;
flex-direction: column;
cursor: pointer;
margin-right: 20px;
}
/* Estilo para las lineas horizontales del botón */
.btn-line {
width: 25px;
height: 3px;
background: #000;
margin: 5px;
}
/* Estilo para el menú */
.menu {
display: none; /* Por defecto, el menú se mantendrá oculto */
}
/* Estilo para el menú cuando se muestra en pantallas más grandes */
nav ul li {
display: inline-block;
}
/* Estilo para los enlaces en el menú */
nav ul li a {
display: block;
color: #000;
text-decoration: none;
padding: 10px;
}
Explicación del código CSS
En este código, utilizamos el elemento `nav` para aplicar estilos al menú. En el selector `.menu-btn`, le indicamos que sea un elemento flexible en dirección de columna, lo que permitirá que las líneas del botón hamburguesa se apilen una encima de la otra. También le damos un cursor de tipo pointer para indicar que es un elemento clickeable.
Luego, en el selector `.btn-line`, le damos los estilos necesarios para que se vean como tres líneas horizontales. Recuerda que puedes cambiar los valores de `width`, `height` y `background` según tus preferencias.
Para el selector `.menu`, le indicamos que por defecto se mantenga oculto con la propiedad `display: none`. Luego, en el selector `nav ul li`, le decimos que los elementos de la lista se muestren en línea y, finalmente, en el selector `nav ul li a`, le damos estilos a los enlaces del menú, como color, decoración de texto y padding.
En este punto, ya tenemos el menú con su estructura y estilos, pero todavía necesitamos agregar la funcionalidad para que se muestre y oculte al hacer clic en el botón hamburguesa. Para esto, utilizaremos JavaScript.
/* Función para mostrar y ocultar el menú */
document.querySelector('.menu-btn').addEventListener('click', () => {
document.querySelector('.menu').classList.toggle('active')
// Al hacer clic en el botón, se agrega o remueve la clase "active" al menú
});
Con estas pocas líneas de código, creamos una función que se activará con un evento click en el botón del menú. Dentro de la función, utilizamos `document.querySelector()` para seleccionar el elemento con la clase `.menu` y le agregamos o removemos la clase `.active`, que contiene los estilos para mostrar el menú.
En pantallas más grandes, no tendremos la necesidad de utilizar el menú hamburguesa, por lo que podemos agregar estilos específicos para mostrar el menú en la barra de navegación. Para esto, podemos utilizar media queries en CSS.
/* Estilo para mostrar el menú en pantallas más grandes */
@media screen and (min-width: 600px) { /* Puedes modificar el valor para adaptarlo a tus necesidades */
.menu {
display: flex !important; /* Se utiliza !important para sobreescribir el display "none" */
justify-content: flex-end;
}
/* Se oculta el botón del menú en pantallas más grandes */
.menu-btn {
display: none;
}
/* Se muestra el logo en la barra de navegación */
.menu .logo {
float: left;
}
}
En este código, utilizamos una media query con un valor de ancho mínimo de 600px para indicar que se apliquen estos estilos solo en pantallas más grandes. Utilizamos `dislay: flex` para que el menú se muestre en forma de fila y `justify-content` para alinearlo a la derecha.
También es importante agregar `!important` en el selector `.menu` para sobreescribir el `display: none` que teníamos previamente en la hoja de estilos.
En el selector `.menu-btn`, simplemente indicamos que se oculte en pantallas más grandes para no tener el botón del menú a la vista.
Finalmente, en el selector `.menu .logo`, le damos estilos al logo o imagen que queramos mostrar en la barra de navegación.
Comentarios finales
En resumen, el uso de menús hamburguesa en páginas web se ha convertido en una tendencia por su capacidad de ahorrar espacio y por su diseño minimalista y práctico.
Siguiendo estos pasos, podrás implementarlo fácilmente en tu página web utilizando HTML, CSS y JavaScript. No olvides probar los estilos y adaptarlos a tu diseño y necesidades específicas. ¡Esperamos que este artículo te haya sido útil para crear tu propio menú hamburguesa en tu página web!
Deja una respuesta