Navegación responsiva menus desplegables con HTML y CSS ★ Agencia marketing digital

Tabla de contenido

Navegación responsiva: menús desplegables con HTML y CSS

En la actualidad, es imprescindible tener en cuenta la navegación responsiva al diseñar sitios web. Uno de los componentes más comunes de la navegación responsiva son los menús desplegables, que permiten organizar y mostrar enlaces de manera eficiente, especialmente en pantallas más pequeñas.

Importancia de la navegación responsiva

Con el crecimiento del uso de dispositivos móviles para acceder a internet, es esencial que los sitios web estén adaptados a diferentes tamaños de pantalla. La navegación responsiva es clave para proporcionar una experiencia de usuario fluida y agradable en todos los dispositivos.

Los menús desplegables son una excelente manera de organizar la navegación en sitios con muchas secciones o páginas. Con ellos, los usuarios pueden acceder a diferentes secciones con solo un par de clics, en lugar de tener que desplazarse por una larga lista de enlaces.

Cómo crear menús desplegables con HTML y CSS

Para crear menús desplegables con HTML y CSS, puedes seguir estos pasos:

Primero, crea la estructura HTML de tu menú utilizando listas no ordenadas (
- ). Por ejemplo:


<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li>
      <a href="#">Productos</a>
<ul>
<li><a href="#">Producto 1</a></li>
<li><a href="#">Producto 2</a></li>
<li><a href="#">Producto 3</a></li>
</ul>
</li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>

Agrega estilos CSS para ocultar las subcategorías y hacer que se muestren cuando el usuario interactúa con el menú. Aquí hay un ejemplo de cómo se pueden aplicar los estilos:


nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: inherit;
}

Finalmente, puedes agregar estilos adicionales para personalizar la apariencia del menú desplegable a tu gusto.

Recuerda que también puedes agregar transiciones CSS para crear efectos suaves cuando el menú se despliega o se contrae.

Ejemplo completo de navegación responsiva con menús desplegables

Aquí tienes un ejemplo completo de una navegación responsiva con menús desplegables utilizando HTML y CSS:


<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li>
      <a href="#">Productos</a>
<ul>
<li><a href="#">Producto 1</a></li>
<li><a href="#">Producto 2</a></li>
<li><a href="#">Producto 3</a></li>
</ul>
</li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>


nav ul {
  background-color: #f9f9f9;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
}
nav ul ul {
  display: none;
  position: absolute;
}
nav ul li:hover > ul {
  display: inherit;
}
nav ul ul li {
  width: 200px;
  float: none;
  display: list-item;
  position: relative;
}
nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 200px;
}
nav ul li:hover {
  background-color: #f1f1f1;
}
nav ul li:hover a {
  color: #428bca;
}

Una vez que hayas implementado esta estructura y estilos en tu sitio web, podrás tener una navegación responsiva con menús desplegables que se adaptará a cualquier pantalla.