Como criar: barra lateral do menu suspenso

Página anterior Menu suspenso na barra de navegação superior
Próxima página Barra de navegação responsiva com menu suspenso

Aprenda como adicionar um menu suspenso na barra de navegação lateral.

Menu suspenso na barra de navegação lateral

Criar o menu suspenso lateral

Primeiro passo - Adicionar HTML：

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
  <button class="dropdown-btn">Dropdown
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <a href="#contact">Search</a>
</div>

Exemplo de explicação:

Abra o menu suspenso usando qualquer elemento, por exemplo <button>, <a> ou elemento <p>.

Use um elemento de contêiner (como <div>) para criar um menu suspenso e adicione links de menu suspenso dentro dele. Usaremos o mesmo estilo para todos os links dentro da barra lateral.

Segundo passo - Adicionar 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;
}
/* Conteúdo principal */
.main {
  margin-left: 200px; /* Mesmo que a largura da barra lateral */
  font-size: 20px; /* Aumentar o texto para permitir rolagem */
  margin: 0px 10px;
}
/* Adicionar uma classe ativa para o botão de menu suspenso ativo */
.active {
  background-color: green;
  color: white;
}
/* Container do menu suspenso (oculto por padrão). Opcional: Adicionar um fundo mais brilhante e um margem interna esquerda para alterar o design do conteúdo do menu suspenso */
.dropdown-container {
  display: none;
  background-color: #262626;
  margin-left: 8px;
}
/* Opcional: Definir o estilo do ícone de seta para baixo */
.fa-caret-down {
  float: right;
  margin-right: 8px;
}

Experimente você mesmo

Terceiro passo - Adicionar JavaScript:

/* Navega por todos os botões de menu suspenso para alternar entre ocultar e mostrar seu conteúdo suspenso - isso permite que o usuário tenha vários menus suspensoes sem qualquer conflito */
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";
    }
  });
}

Experimente você mesmo