W3.CSS fornecer todos os tipos de barras de navegação:
Vertical:
Horizontal (vertical em telas pequenas):
Navegação básica
A classe w3-navbar cria uma barra de navegação horizontal:
Exemplo
<ul class="w3-navbar w3-black">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> Tente você mesmo " Barras de navegação coloridas
Exemplo
<ul class="w3-navbar w3-light-grey">
<ul
class="w3-navbar w3-green">
<ul
class="w3-navbar w3-blue"> Tente você mesmo " Bares limitou navegação
Exemplo
<ul class="w3-navbar w3-border w3-light-grey">
<ul
class="w3-navbar w3-border w3-round w3-light-grey">
<ul
class="w3-navbar w3-card-8 w3-light-grey"> Tente você mesmo " Ativo / Fazer a ligação atual
Exemplo
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-green" href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> Tente você mesmo " Ligações Hoverable
Ao passar o mouse sobre os links dentro da barra de navegação, a cor de fundo muda para cinza.
Se você quer uma cor de fundo diferente em foco, use qualquer uma das classes de cor w3-hover-, e se você quer uma cor de texto diferente em foco, use qualquer uma das classes w3-pairar-text-color:
Exemplo
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-hover-red" href="#">Home</a></li>
<li><a class="w3-hover-blue" href="#">Link 1</a></li>
<li><a
class="w3-hover-green" href="#">Link 2</a></li>
<li><a class="w3-hover-teal" href="#">Link 3</a></li>
</ul> Tente você mesmo " Ligações alinhado à direita
Exemplo
<ul class="w3-navbar w3-light-grey w3-border">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li
class="w3-right"><a class="w3-green" href="#">Link
3</a></li>
</ul> Tente você mesmo " Barra de navegação Tamanho
Alterar o tamanho da fonte:
Exemplo
<ul class="w3-navbar w3-green w3-large">
<ul class="w3-navbar w3-green
w3-xlarge"> Tente você mesmo " Alterar o padding:
Exemplo
<ul class="w3-navbar w3-green">
<li><a class="w3-padding-hor-16" href="#">Home</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 1</a></li>
<li><a
class="w3-padding-hor-16" href="#">Link 2</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 3</a></li>
</ul> Tente você mesmo " Personalize a largura dos itens da lista com a propriedade de largura CSS (Nota: em telas menores, eles vão transformar a 100%):
Exemplo
<ul class="w3-navbar w3-dark-grey w3-center">
<li
style="width:50%"><a class="w3-padding w3-green" href="#">Home</a></li>
<li style="width:50%"><a class="w3-padding" href="#">Link 1</a></li>
</ul> Tente você mesmo " Barra de navegação com ícones
Exemplo
<ul class="w3-navbar w3-light-grey w3-border
w3-large">
<li><a
class="w3-green" href="#"><i class="fa fa-home w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-search w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-envelope w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-globe w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-sign-in w3-large"></i></a></li>
</ul> Tente você mesmo " Barra de navegação com Dropdown
Passe o mouse sobre o link "drop-down":
Exemplo
<ul class="w3-navbar w3-card-2 w3-light-grey">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li class="w3-dropdown-hover">
<a href="#">Dropdown</a>
<div
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul> Tente você mesmo " Nota: Quando o menu suspenso é "aberto", o link suspensa recebe uma cor de fundo cinza para indicar que ele está ativo. Para substituir isso, adicione uma classe cor w3-hover- tanto para o "menu suspenso" <li> e <a>:
Dica: Se você quiser um símbolo suspensa ao lado do texto suspenso, adicionar um ícone adequado (como ):
Exemplo
<li class="w3-dropdown-hover
w3-hover-orange">
<a class="w3-hover-orange" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li> Tente você mesmo " Use w3-suspenso clique se você preferir, clique no link suspenso em vez de pairar:
Exemplo
<li class="w3-dropdown-click">
<a onclick="myFunction()" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div id="demo"
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li> Tente você mesmo " Corrigido barra de navegação
Para forçar a barra de navegação para ficar na parte superior ou na parte inferior da página, mesmo quando o usuário rola a página, enrole um elemento <div> em torno do <ul> e adicione o w3-top ou classe w3-bottom:
Parte inferior fixa
<div class="w3-bottom">
<ul class="w3-navbar">
...
</ul>
</div> Tente você mesmo " Colapso da barra de navegação
Quando a barra de navegação ocupa muito espaço em uma tela pequena, e você não quer exibi-lo verticalmente por padrão, você pode usar classes de utilitários para ocultar e mostrar links específicos na barra de navegação.
No exemplo abaixo, a barra de navegação é substituído por um botão (☰) no canto superior direito quando mostrado em tablets e dispositivos móveis. Quando o botão é clicado, a barra de navegação será exibido verticalmente:
Exemplo
Tente você mesmo "topnav
Outro exemplo de uma barra de navegação, é a classe W3-topnav. É semelhante ao w3-navbar, exceto que ele vai adicionar um sublinhado quando você passa o mouse sobre os links, em vez de uma cor de fundo:
Exemplo
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Tente você mesmo " Exemplo com fonte ícones impressionantes
<nav class="w3-topnav w3-green">
<a href="#"><i class="fa
fa-home"></i></a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Tente você mesmo " navegação lateral
A classe w3-sidenav cria uma barra de navegação vertical:
Vá para o próximo capítulo para aprender mais sobre a navegação lateral.