CSS menu drop-down
Use CSS para criar o vídeo após um rato movimento sobre o efeito menu drop-down.
Exemplos do menu drop-down
Exemplos Demo 1
este tutorial
www.w3big.com
Exemplos Demo 2
Exemplos Demonstração 3
menu drop-down básico
Quando o rato é movido para os elementos especificados, vai cair para baixo de menu aparece.
Exemplos
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: # f9f9f9;
min-width: 160px;
box-shadow: 0px 16px 0px 8px rgba (0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown: hover-content .dropdown {
display: block;
}
</ Style>
<Div class = "dropdown">
<Span> Passe o mouse sobre me </ span>
<Div class = "dropdown-content ">
<P> Olá mundo! </ P>
</ Div>
</ Div>
tente »
Exemplos de analítico
parte HTML:
Podemos usar qualquer um dos HTM, os elementos para abrir o menu drop-down, tais como: <span>, ou um elemento <button>.
Use elemento de recipiente (por exemplo: <div>) para criar um menu suspenso e colocado em qualquer lugar que você deseja colocar.
Use elemento <div> para envolver esses elementos, e usar CSS para definir o conteúdo do estilo drop-down.
parte CSS:
.dropdown classe usa position:relative , que irá definir o conteúdo do menu suspenso é colocado no botão drop-down (usando position:absolute ) na posição canto inferior direito.
.dropdown-content classe é o menu real drop-down. Está oculta por padrão, aparecerá no rato é movido para o elemento especificado em seguida. Note-se que min-width valor é definido como 160px. Você pode modificá-lo livremente. Nota: Se você deseja definir o drop-down e botão de conteúdo de banda larga consistente suspensa, defina a width a 100% ( overflow:auto configuração pode rolar o pequeno tamanho da tela).
Usamos o box-shadow propriedade permite que o menu drop-down que se parece com um "cartão".
:hover selector de menu drop-down do usuário aparecerá quando o mouse é movido para o botão drop-down.
Drop-down menu
Criar um menu drop-down, e permite que o usuário selecione um item na lista:
Os exemplos anteriores de casos semelhantes, quando adicionar um link na lista drop-down, e definir o estilo:
Exemplos
/ * Estilo botão drop-down * /
.dropbtn {
background-color: # 4CAF50;
cor: branco;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/ * Container <div> - você precisa para localizar o conteúdo drop-down * /
.dropdown {
position: relative;
display: inline-block;
}
/ * O conteúdo Pulldown (oculto por padrão) * /
.dropdown-content {
display: none;
position: absolute;
background-color: # f9f9f9;
min-width: 160px;
box-shadow: 0px 16px 0px 8px rgba (0,0,0,0.2);
}
/ * Menus Fazer a ligação drop-down * /
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/ * Seguindo o menu Editar cor suspensa ligação pairar * /
.dropdown-content a: hover {background -cor: # f1f1f1}
/ * Após o menu Mostrar pairar drop-down * /
.dropdown: hover-content .dropdown {
display: block;
}
/ * Quando o conteúdo do drop-down após o botão drop-down exibe a cor de fundo modificada * /
.dropdown: hover {.dropbtn
background-color: # 3e8e41;
}
</ Style>
<Div class = "dropdown">
<Button class = "dropbtn"> menu suspenso </ button>
<Div class = "dropdown-content ">
<A Href = "#"> Este tutorial 1 </ a>
<A Href = "#"> Este tutorial 2 </ a>
<A Href = "#"> Este tutorial 3 </ a>
</ Div>
</ Div>
tente »
conteúdo suspensa Alinhamento
float: left;
float: right;
Se você deseja configurar menu drop-down flutuante conteúdo certo é da direita para a esquerda em vez de esquerda para a direita, você pode adicionar o seguinte código right: 0;
mais exemplos
Imagem drop-down
Este exemplo demonstra como adicionar uma imagem de como o menu pull-down.
Deixe cair para baixo de navegação
Este exemplo demonstra como adicionar um menu drop-down na barra de navegação.