Criar uma lista suspensa hoverable com CSS.
Demonstração: Exemplos Dropdown
Passe o mouse sobre os exemplos abaixo:
suspensa Básico
Criar uma caixa suspensa que aparece quando o usuário move o mouse sobre um elemento.
Exemplo
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display:
none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding:
12px 16px;
z-index: 1;
}
.dropdown:hover
.dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span> Mouse over me </span>
<div class="dropdown-content">
<p> Hello World! </p>
</div>
</div> Tente você mesmo " exemplo Explicado
HTML) Use qualquer elemento para abrir o conteúdo suspenso, por exemplo, um <span> ou um <button> elemento.
Use um elemento de recipiente (como <div> ) para criar o conteúdo suspenso e adicionar o que quiser dentro dele.
Enrole um <div> elemento em torno dos elementos para posicionar o conteúdo suspenso corretamente com CSS.
CSS) O .dropdown uso class position:relative , que é necessário quando se deseja que o conteúdo pendente para ser colocado logo abaixo do botão suspenso (usando position:absolute ).
O .dropdown-content classe contém o conteúdo suspenso real. Ele está escondido por padrão, e será exibido em foco (veja abaixo). Observe o min-width está definido como 160px. Sinta-se livre para mudar isso. Sugestão: Se desejar que a largura do conteúdo pendente para ser tão grande como o botão suspenso, defina a width para 100% (e overflow:auto para permitir a rolagem em telas pequenas).
Em vez de usar uma borda, temos utilizado a CSS3 box-shadow propriedade para fazer o menu suspenso olhar como um "cartão".
A :hover seletor é usado para mostrar o menu suspenso quando o usuário move o mouse sobre o botão suspenso.
Menu suspenso
Criar um menu suspenso que permite ao usuário para escolher uma opção de uma lista:
Este exemplo é semelhante ao anterior, exceto que adicionar links dentro da caixa de lista suspensa e estilo-los para caber um botão suspenso estilo:
Exemplo
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The
container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display:
inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position:
absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the
dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown
button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn"> Dropdown </button>
<div class="dropdown-content">
<a href="#"> Link
1 </a>
<a href="#"> Link 2 </a>
<a href="#"> Link 3 </a>
</div>
</div> Tente você mesmo " Conteúdo suspensa-alinhado à direita
Se quiser que o menu suspenso para ir da direita para a esquerda, em vez da esquerda para a direita, adicione right: 0;
mais Exemplos
imagem suspensa
Este exemplo demonstra como adicionar uma imagem e outros conteúdos dentro da caixa suspensa.
suspensa Navbar
Este exemplo demonstra como adicionar um menu suspenso no interior de uma barra de navegação.