Demonstração: barras de navegação
barras de navegação
Tendo a navegação mais fácil de usar é importante para qualquer web site.
Com CSS você pode transformar menus HTML chato em boa aparência barras de navegação.
Barra de navegação = lista de links
Uma barra de navegação precisa de HTML padrão como base.
Em nossos exemplos vamos construir a barra de navegação de uma lista HTML padrão.
Uma barra de navegação é basicamente uma lista de links, portanto, usando o <ul> e <li> elementos faz todo o sentido:
Exemplo
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Tente você mesmo " Agora vamos remover as balas e as margens e preenchimento da lista:
Exemplo explicou:
-
list-style-type: none;- Remove as balas. Uma barra de navegação não necessita de marcadores de lista - Set
margin: 0;epadding: 0;para remover configurações padrão do navegador
O código no exemplo acima é o código padrão usado em ambas as barras de navegação verticais, e horizontais.
Vertical Navigation Bar
Para construir uma barra de navegação vertical, você pode estilizar os <a> elementos dentro da lista, além de o código acima:
Exemplo explicou:
-
display: block;- Exibindo os links como elementos de bloco faz todo o clickable área de link (não apenas o texto), e permite-nos para especificar a width (e padding, margin, height , etc. se você quiser) -
width: 60px;- elementos Bloco ocupam toda a largura disponível por padrão. Queremos especificar uma largura de 60 pixels
Você também pode definir a largura do <ul> e remova a largura da <a> , como eles vão ocupar toda a largura disponível quando exibido como elementos de bloco. Isto irá produzir o mesmo resultado que o nosso exemplo anterior:
Exemplo
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
} Tente você mesmo " Exemplos Vertical Navigation Bar
Criar uma barra de navegação vertical básico com uma cor de fundo cinza e mudar a cor dos links de fundo quando o usuário move o mouse sobre eles:
Exemplo
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px
0 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
} Tente você mesmo " Ativo / atual do link de navegação
Adicionar uma classe "ativo" para a ligação atual para que o usuário saiba qual página ele / ela está em:
Centro de Ligações & Add Borders
Adicionar text-align:center para <li> ou <a> para centralizar os links.
Adicionar a border propriedade para <ul> adicionar uma borda em torno da barra de navegação. Se você também quiser fronteiras dentro da barra de navegação, adicione um border-bottom a todos <li> elementos, exceto para o último:
Exemplo
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
} Tente você mesmo " Full-altura fixa Vertical Navbar
Criar um de altura completa, "sticky" navegação lateral:
Exemplo
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
} Tente você mesmo " Nota: Este exemplo pode não funcionar corretamente em dispositivos móveis.
Barra de navegação horizontal
Existem duas maneiras de criar uma barra de navegação horizontal. Usandolinha ou flutuanteitens da lista.
Lista de Itens de inline
Uma maneira de construir uma barra de navegação horizontal é especificar os <li> elementos como inline, além do "standard" código acima:
Exemplo explicou:
-
display: inline;- Por padrão, <li> elementos são elementos de bloco. Aqui, nós removemos as quebras de linha antes e depois de cada item da lista, para exibi-los em uma linha
Flutuante Lista de Itens
Outra maneira de criar uma barra de navegação horizontal é flutuar as <li> elementos, e especificar um esquema para os links de navegação:
Exemplo
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
} Tente você mesmo " Exemplo explicou:
-
float: left;- uso do flutuador para obter elementos de bloco para deslizar ao lado do outro -
display: block;- Exibindo os links como elementos de bloco faz todo o clickable área de link (não apenas o texto), e permite-nos para especificar preenchimento (e height, width, margins , etc. se você quiser) -
padding: 8px;- Uma vez que os elementos do bloco ocupam a largura total disponível, não podem flutuar ao lado do outro. Portanto, especificar algum estofamento para torná-los com bom aspecto -
background-color: #dddddd;- Adicionar um fundo cinzento-cor para cada um elemento
Dica: Adicione o background-color para <ul> em vez de cada <a> elemento se você quer uma cor de fundo de largura total:
Exemplos Barra de navegação horizontal
Criar uma barra de navegação horizontal básico com uma cor de fundo escuro e mudar a cor dos links de fundo quando o usuário move 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;
} Tente você mesmo " Ativo / atual do link de navegação
Adicionar um "active" classe para a ligação atual para que o usuário saiba qual página ele / ela está em:
Ligações alinhar à direita
Ligações alinhar à 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> Tente você mesmo " divisores de fronteira
Adicione o border-right propriedade para <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;
} Tente você mesmo " Corrigido barra de navegação
Tornar a estadia barra de navegação no topo ou na parte inferior da página, mesmo quando o usuário rola a página:
Nota: Estes exemplos podem não funcionar corretamente em dispositivos móveis.
Cinza Horizontal Navbar
Um exemplo de um cinza barra de navegação horizontal com uma borda cinza fina:
Exemplo
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Tente você mesmo " 
mais Exemplos
topnav Responsive
Como usar consultas de mídia CSS3 para criar uma navegação superior responsivo.
Sidenav Responsive
Como usar consultas de mídia CSS3 para criar uma navegação lateral responsivo.
suspensa Navbar
Como adicionar um menu suspenso no interior de uma barra de navegação.