Como criar: menus suspensos clicáveis

Aprenda a usar CSS e JavaScript para criar menus suspensos clicáveis.

Crie um menu suspenso clicável

Crie um menu suspenso que apareça ao clicar no botão do usuário.

Primeiro passo - Adicionar HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Exemplo de explicação:

Pode-se usar qualquer elemento para abrir o menu suspenso, por exemplo, elementos <button>, <a> ou <p>.

Use um elemento de contêiner (como <div>) para criar o menu suspenso e adicione os links do menu suspenso nele.

Use o elemento <div> para envolver o botão e o <div>, para que o CSS possa posicionar corretamente o menu suspenso.

Segundo passo - Adicionar CSS:

/* 下拉按钮 */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* 鼠标悬停和聚焦时的下拉菜单按钮 */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}
/* 容器 <div> - 用于定位下拉菜单内容所需的元素 */
.dropdown {
  position: relative;
  display: inline-block;
}
/* 下拉菜单内容（默认隐藏） */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* 下拉菜单内的链接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* 鼠标悬停时更改下拉菜单链接的颜色 */
.dropdown-content a:hover {background-color: #ddd;}
/* Exiba o menu suspenso (ao clicar no botão do menu suspenso, use JS para adicionar este classe ao contêiner .dropdown-content) */
.show {display:block;}

Exemplo de explicação:

Nós configuramos estilos como cor de fundo, margem interna, efeito de sobreposição para o botão do menu suspenso.

.dropdown classe para usar position:relativequando queremos colocar o conteúdo do menu suspenso diretamente abaixo do botão do menu suspenso (usando position:absolute), isso é necessário.

.dropdown-content Classe contém o menu suspenso real. Ele é oculto por padrão e será exibido ao passar o mouse (veja a seguir). Observe que o comprimento mínimo é configurado em 160px. Você pode alterar este valor conforme necessário. Dica: Se você desejar que o comprimento do conteúdo do menu suspenso seja igual ao do botão do menu suspenso, configure a largura para 100% (e use overflow:auto para habilitar a rolagem).

Não usamos bordas, mas sim box-shadow propriedade, para que o menu suspenso pareça como uma "carta". Também usamos z-index Coloque o menu suspenso à frente de outros elementos.

Terceiro passo - Adicione JavaScript:

/* Alterne o estado de ocultação e exibição do conteúdo do menu suspenso ao clicar no botão */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// Se o usuário clicar fora do menu suspenso, feche o menu suspenso
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Experimente pessoalmente

Páginas relacionadas

Tutorial:Menu suspenso CSS

Tutorial:Como criar: menu suspenso clicável