Barra de navegação horizontal CSS
Barra de navegação horizontal
Há duas maneiras de criar uma barra de navegação horizontal. Usando itens de lista em linha ou flutuantes .
Itens de lista em linha
Uma maneira de construir uma barra de navegação horizontal é especificar os elementos <li> como embutidos, além do código "padrão" da página anterior:
Exemplo
li
{
display: inline;
}
Exemplo explicado:
display: inline;- Por padrão, os elementos <li> são elementos de bloco. Aqui, removemos as quebras de linha antes e depois de cada item da lista, para exibi-las em uma linha
Itens de lista flutuante
Outra maneira de criar uma barra de navegação horizontal é flutuar os elementos <li> e especificar um layout para os links de navegação:
Exemplo
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
Exemplo explicado:
float: left;- Use float para fazer com que os elementos do bloco flutuem um ao lado do outrodisplay: block;- Permite especificar o preenchimento (e altura, largura, margens, etc., se desejar)padding: 8px;- Especifique algum preenchimento entre cada elemento <a>, para torná-los bonitosbackground-color: #dddddd;- Adicione uma cor de fundo cinza a cada elemento <a>
Dica: adicione a cor de fundo a <ul> em vez de cada elemento <a> se quiser uma cor de fundo de largura total:
Exemplo
ul
{
background-color: #dddddd;
}
Exemplos de barra de navegação horizontal
Crie uma barra de navegação horizontal básica com uma cor de fundo escura e altere a cor de fundo dos links quando o usuário passar o mouse sobre eles:
Exemplo
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
}
Link de navegação ativo/atual
Adicione uma classe "ativa" ao link atual para que o usuário saiba em qual página ele está:
Exemplo
.active {
background-color: #04AA6D;
}
Links de alinhamento à direita
Alinhe os links à direita flutuando os itens da lista para a direita ( float:right;):
Exemplo
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul>
Divisores de borda
Adicione a border-rightpropriedade a <li> para criar divisores de link:
Exemplo
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Barra de navegação fixa
Faça com que a barra de navegação fique na parte superior ou inferior da página, mesmo quando o usuário rolar a página:
Parte superior fixa
ul {
position: fixed;
top: 0;
width: 100%;
}
Parte inferior fixa
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Nota: A posição fixa pode não funcionar corretamente em dispositivos móveis.
Barra de navegação horizontal cinza
Um exemplo de uma barra de navegação horizontal cinza com uma borda cinza fina:
Exemplo
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Barra de navegação fixa
Adicione position: sticky;a <ul> para criar uma barra de navegação fixa.
Um elemento adesivo alterna entre relativo e fixo, dependendo da posição de rolagem. Ele é posicionado em relação até que uma determinada posição de deslocamento seja encontrada na viewport - então ele "gruda" no lugar (como position:fixed).
Exemplo
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Nota: o Internet Explorer não suporta posicionamento fixo. O Safari requer um prefixo -webkit- (veja o exemplo acima). Você também deve especificar pelo menos um de , topou para que o posicionamento fixo funcione.rightbottomleft
Mais exemplos
Topnav responsivo
Como usar consultas de mídia CSS para criar uma navegação superior responsiva.
Sidenav responsivo
Como usar consultas de mídia CSS para criar uma navegação lateral responsiva.
Barra de navegação suspensa
Como adicionar um menu suspenso dentro de uma barra de navegação.
Já ouviu falar dos Espaços W3Schools ? Aqui você pode criar seu site do zero ou usar um modelo e hospedá-lo gratuitamente.
Comece gratuitamente ❯* não é necessário cartão de crédito