En el desarrollo web, la navegación es un elemento clave para la experiencia de usuario (UX). Un menú bien diseñado ayuda a los visitantes a encontrar fácilmente lo que buscan, mientras que un submenú de dos niveles permite organizar la información de manera más eficiente, sobre todo en sitios con mucha información. En este artículo te enseñaré cómo crear un menú con un submenú de dos niveles utilizando HTML, CSS y un poco de JavaScript para la interactividad.
¿Por qué Crear Menús Desplegables?
Los menús desplegables son útiles para mejorar la organización y estructura de un sitio web. Estos menús permiten mostrar categorías generales y, al mismo tiempo, incluir subcategorías. Por ejemplo, en una tienda en línea podrías tener una categoría de «Ropa» y subcategorías como «Camisetas», «Pantalones» y «Accesorios». Esto reduce el desorden en la página principal y mejora la navegación del usuario.
Estructura del Menú con HTML
El primer paso para crear un menú de dos niveles es estructurarlo usando HTML. Este lenguaje nos proporciona las etiquetas necesarias para construir la base de nuestro menú y submenú.
Aquí te muestro el código básico:
<nav>
<ul class="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Productos</a>
<ul class="submenu">
<li><a href="#">Camisetas</a></li>
<li><a href="#">Pantalones</a>
<ul class="submenu-nivel2">
<li><a href="#">Jeans</a></li>
<li><a href="#">Shorts</a></li>
</ul>
</li>
<li><a href="#">Accesorios</a></li>
</ul>
</li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>En este código, usamos listas no ordenadas (<ul>) para estructurar el menú principal y el submenú. Los elementos de la lista (<li>) contienen enlaces (<a>) que actúan como elementos interactivos. El submenú de nivel dos está anidado dentro del submenú de nivel uno.
Estilos del Menú con CSS
El siguiente paso es estilizar nuestro menú usando CSS. A continuación, te mostraré cómo ocultar el submenú por defecto y hacerlo visible cuando el usuario pase el ratón sobre el menú principal.
/* Estilos básicos del menú */
.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.menu li {
position: relative;
}
.menu a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
background-color: #f4f4f4;
}
.menu a:hover {
background-color: #ddd;
}
/* Ocultar submenús por defecto */
.submenu, .submenu-nivel2 {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #f4f4f4;
list-style: none;
padding: 0;
margin: 0;
}
.submenu li, .submenu-nivel2 li {
width: 200px;
}
.submenu a, .submenu-nivel2 a {
padding: 10px;
white-space: nowrap;
}
/* Mostrar submenú al pasar el ratón */
.menu li:hover > .submenu {
display: block;
}
.submenu li:hover > .submenu-nivel2 {
display: block;
top: 0;
left: 100%;
}Explicación del Código CSS
- Menú principal: Estilizamos la lista principal
.menucomo un menú horizontal utilizandodisplay: flex. Cada elemento (<li>) está posicionado de forma relativa para que los submenús puedan posicionarse correctamente. - Submenús: Los submenús
.submenuy.submenu-nivel2están ocultos por defecto condisplay: none. Usamosposition: absolutepara asegurarnos de que aparezcan justo debajo o al lado del menú principal. - Efecto hover: Al pasar el ratón sobre un elemento del menú, el submenú correspondiente se muestra utilizando
display: block.
Añadir Interactividad con JavaScript
Aunque el CSS puede manejar la mayoría de las interacciones, agregar JavaScript nos permite mejorar la funcionalidad, especialmente en dispositivos táctiles o para asegurar la compatibilidad con navegadores que no soportan :hover.
document.addEventListener('DOMContentLoaded', function() {
var menuItems = document.querySelectorAll('.menu > li');
menuItems.forEach(function(item) {
item.addEventListener('click', function(event) {
var submenu = item.querySelector('.submenu');
if (submenu) {
event.preventDefault();
submenu.classList.toggle('activo');
}
});
});
});Explicación del Código JavaScript
- Escuchar el evento DOMContentLoaded: Nos aseguramos de que todo el DOM esté cargado antes de ejecutar el código.
- Seleccionar los elementos del menú: Seleccionamos todos los elementos de primer nivel del menú principal.
- Evento click: Agregamos un evento
clickpara cada elemento del menú que tiene un submenú. Este código permite que el submenú se despliegue al hacer clic. - Clase activo: Usamos la clase
activopara mostrar u ocultar el submenú según sea necesario.
Conclusión
Crear un menú desplegable de dos niveles con HTML, CSS y JavaScript es un proceso relativamente sencillo que mejora la usabilidad y organización de tu sitio web. Siguiendo los pasos que hemos detallado, podrás implementar este tipo de menús en cualquier proyecto web, proporcionando una mejor experiencia de navegación a tus usuarios.
Recuerda que el uso de CSS para controlar la visibilidad de los submenús y de JavaScript para añadir interactividad adicional es clave para garantizar una experiencia responsiva y accesible. Si bien este es un menú básico, puedes personalizarlo según las necesidades de tu sitio, como agregar efectos de transición, animaciones o compatibilidad con dispositivos móviles.