Creación de un menú desplegable multinivel

En este artículo te explicaré cómo crear un menú desplegable multinivel utilizando HTML, CSS y JavaScript. Analizaremos paso a paso cómo hacer que dicho menú sea cómodo y moderno. Incluso si eres principiante, podrás seguir estas instrucciones y crear tu propio menú desplegable. ¡Vamos!

¿Qué es un menú desplegable multinivel?

Un menú desplegable es un elemento de la interfaz que permite al usuario navegar rápidamente por el sitio. El menú multinivel tiene submenús que se pueden anidar entre sí. Estos menús se encuentran a menudo en sitios grandes donde hay muchas categorías y subcategorías. Un ejemplo de este menú se puede ver en los sitios web de tiendas en línea o portales corporativos.

Estructura HTML para el menú desplegable

Para crear un menú desplegable multinivel, comenzaremos con HTML. Creamos una estructura de menú básica usando los elementos <ul> y <li> para la lista y los subpárrafos:

<nav class="menu">
  <ul>
    <li><a href="# ">Inicio</a></li>
    <li><a href="# ">Servicios</a>
      <ul class="submenu">
        <li><a href="# ">Desarrollo web</a></li>
        <li><a href="# ">Aplicaciones móviles</a>
          <ul class="submenu">
            <li><a href="#">iOS</a></li>
            <li><a href="#">Android</a></li>
          </ul>
        </li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="# ">Contactos</a></li>
  </ul>
</nav>

Aquí usamos listas anidadas <ul> para crear elementos de menú de varios niveles. Cada <li> puede contener un enlace (<a>) y una lista anidada (<ul>) para formar un submenú.

Estilizar el menú con CSS

Ahora vamos a añadir estilos para que nuestro menú se vea bonito y tenga una funcionalidad desplegable. CSS ayudará a ocultar los submenús y mostrarlos al pasar el cursor sobre el elemento principal.

/* Основные стили для меню */
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu > ul > li {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}

.menu a {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  display: block;
}

/* Скрываем подменю по умолчанию */
.menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Показываем подменю при наведении на родительский элемент */
.menu li:hover > .submenu {
  display: block;
}

/* Стили для элементов подменю */
.submenu li {
  position: relative;
  margin: 0;
}

.submenu .submenu {
  top: 0;
  left: 100%;
}

Añadir interactividad con JavaScript

Para que el menú sea cómodo en dispositivos móviles, agregaremos un poco de JavaScript. Con la ayuda de JavaScript, podemos controlar la visualización del submenú al hacer clic.

document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('.menu li');

  menuItems.forEach(item => {
    const submenu = item.querySelector('.submenu');
    if (submenu) {
      item.addEventListener('click', function(e) {
        e.stopPropagation();
        submenu.classList.toggle('show');
      });
    }
  });

  document.addEventListener('click', function() {
    document.querySelectorAll('.submenu').forEach(submenu => {
      submenu.classList.remove('show');
    });
  });
});

En este código, agregamos un controlador de eventos a cada elemento del menú con un submenú. La clase show se añade y se elimina para mostrar y ocultar el submenú. También añadimos un controlador a todo el documento para ocultar el submenú al hacer clic en cualquier otro lugar de la página.

Conclusión

Crear un menú desplegable de varios niveles no es tan difícil como parece. Lo principal es comprender la estructura HTML y aprender a controlar la visibilidad de los elementos usando CSS y JavaScript. El menú desplegable ayuda al usuario a encontrar fácilmente la información que necesita y hace que el sitio web sea más fácil de usar.

Intenta crear tu propio menú desplegable usando este ejemplo. Y si quieres aprender a hacer interfaces aún más complejas, te recomiendo que pruebes la aplicación Kodik. En él encontrarás cursos de HTML, CSS y JavaScript que te ayudarán a dominar rápidamente el desarrollo web y a crear proyectos aún más interesantes.