Como fazer - Mais botão na barra de navegação
Saiba como criar um botão "mais".
Botão "Mais" na barra de navegação
Criar uma barra de navegação suspensa
Crie um menu suspenso que aparece quando o usuário move o mouse sobre um elemento dentro de uma barra de navegação.
Etapa 1) Adicionar HTML:
Exemplo
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">More
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
Exemplo explicado
Use qualquer elemento para abrir o menu suspenso, por exemplo, um elemento <button>, <a> ou <p>.
Use um elemento de contêiner (como <div>) para criar o menu suspenso e adicione os links suspensos dentro dele.
Enrole um elemento <div> ao redor do botão e o <div> para posicionar o menu suspenso corretamente com CSS.
Etapa 2) Adicionar CSS:
Exemplo
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration:
none;
}
/* The dropdown
container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family:
inherit; /* Important for vertical align on mobile phones */
margin:
0; /* Important for vertical align on mobile phones */
}
/* Add a
red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* 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);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links
on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/*
Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
Exemplo explicado
Nós estilizamos a barra de navegação e os links da barra de navegação com uma cor de fundo, preenchimento, etc.
Estilizamos o botão suspenso com uma cor de fundo, preenchimento, etc.
A .dropdownclasse é o contêiner para
.dropdown-content. Como este é um elemento <div>, e não um elemento <a>, temos que flutuar para garantir que ele permaneça próximo aos links.
A .dropdown-contentclasse contém o menu suspenso real. Ele está oculto por padrão e será exibido ao passar o mouse (veja abaixo). Observe min-widthque está definido para 160px. Sinta-se à vontade para mudar isso.
Em vez de usar uma borda, usamos a box-shadowpropriedade para fazer o menu suspenso parecer um "cartão". Também usamos o z-index para colocar a lista suspensa na frente de outros elementos.
O :hoverseletor é usado para mostrar o menu suspenso quando o usuário move o mouse sobre o botão suspenso.
Páginas relacionadas
Dica: Acesse nosso Tutorial de dropdowns CSS para saber mais sobre dropdowns.
Dica: acesse nossas listas suspensas clicáveis para saber mais sobre listas suspensas clicáveis
Dica: Acesse nosso tutorial CSS Navbar para saber mais sobre navbars.
Dica: acesse nossa navegação superior responsiva para saber como criar uma barra de navegação responsiva.