tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS dropdowns


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;

Exemplo

.dropdown-content {
    right: 0;
}
Tente você mesmo "

Exemplos

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.