Cómo crear: barra lateral del menú desplegable

Página anterior La barra de navegación desplegable en la parte superior
página siguiente navbar responsiva con menú desplegable

Aprende cómo agregar un menú desplegable en la barra de navegación lateral.

El menú desplegable en la barra de navegación lateral

Crear la barra lateral del menú desplegable

Primero - Añadir HTML：

<div class="sidenav">
  <a href="#about">Acerca de</a>
  <a href="#services">Servicios</a>
  <a href="#clients">Clientes</a>
  <a href="#contact">Contacto</a>
  <button class="dropdown-btn">Desplegable
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Enlace 1</a>
    <a href="#">Enlace 2</a>
    <a href="#">Enlace 3</a>
  </div>
  <a href="#contact">Buscar</a>
</div>

Ejemplo de explicación:

Abre el menú desplegable con cualquier elemento, por ejemplo <button>, <a> o el elemento <p>.

Crea un elemento contenedor (como <div>) para crear el menú desplegable y agrega enlaces de menú desplegable. Utilizaremos el mismo estilo para todos los enlaces dentro de la barra lateral.

Segundo paso - Añadir CSS:

/* 固定的侧边导航栏，全高 */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* 设置侧边栏链接和下拉菜单按钮的样式 */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}
/* 鼠标悬停时 */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}
/* Contenido principal */
.main {
  margin-left: 200px; /* Igual al ancho de la barra lateral */
  font-size: 20px; /* Aumentar el texto para activar el desplazamiento */
  padding: 0px 10px;
}
/* Añadir una clase activa al botón de menú desplegable activo */
.active {
  background-color: green;
  color: white;
}
/* Contenedor del menú desplegable (por defecto está oculto). Opcional: Añadir un fondo más brillante para el contenido del menú desplegable y algunos márgenes internos para cambiar su diseño */
.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}
/* Opcional: Establecer el estilo del icono de flecha hacia abajo */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

Prueba por ti mismo

Tercero - Añadir JavaScript:

/* Recorrer todos los botones de navegación desplegable para alternar entre ocultar y mostrar su contenido desplegable - Esto permite al usuario tener múltiples menús desplegables sin conflictos */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

Prueba por ti mismo