Barras de navegação W3.CSS

Classes da barra de navegação W3.CSS

W3.CSS fornece as seguintes classes para barras de navegação:

Navegação básica

A classe w3-bar é um contêiner para exibir elementos HTML horizontalmente.

A classe w3-bar-item define os elementos do contêiner.

É uma ferramenta perfeita para criar barras de navegação:

Navegação responsiva

A classe w3-mobile torna qualquer elemento de barra responsivo (horizontal em telas grandes e vertical em telas pequenas).

Barras de navegação coloridas

Use uma classe w3-color para adicionar uma cor à barra de navegação:

Barras de navegação com bordas

Use uma classe w3-border ou w3-card para adicionar bordas ao redor da barra de navegação ou para exibi-la como um cartão:

Link Ativo/Atual

Adicione uma classe w3-color a um link para destacá-lo:

Links flutuantes

Quando você passa o mouse sobre um botão, a cor de fundo muda para cinza.

Se você quiser uma cor de fundo diferente ao passar o mouse, use qualquer uma das classes w3-hover- color :

Se você quiser alterar a cor do texto, desative o efeito de foco padrão com a classe w3-hover-none e adicione uma classe w3-hover-text .

Passe algum tempo para brincar com diferentes efeitos de foco:

Links alinhados à direita

Use a classe w3-right em um item de lista para alinhar à direita um link específico:

Tamanho da barra de navegação

Use uma classe w3-size para alterar o tamanho da fonte dos links dentro da barra de navegação:

Use uma classe de preenchimento w3 para alterar o preenchimento de cada link dentro da barra de navegação:

Nota: Você também pode adicionar preenchimento à barra de navegação, em vez de cada botão. No entanto, se você fizer isso, observe que os links não recebem preenchimento completo ao passar o mouse:

Personalize a largura dos links com a propriedade de largura do CSS

( Nota : Use w3-mobile para transformar os links em 100% de largura em telas pequenas):

Barra de navegação com ícones

Texto da barra de navegação

Se você quiser texto em vez de botões dentro da barra de navegação, use a classe w3-bar-item para obter o mesmo preenchimento dos botões.

Navbar com entradas e botões

Barra de navegação com menu suspenso

Mova o mouse sobre o link "Suspenso":

Lista suspensa clicável

Use w3-dropdown-click se preferir clicar no link suspenso em vez de passar o mouse:

Menu suspenso horizontal

Remova a classe w3-bar-block do contêiner suspenso se desejar que os links suspensos sejam exibidos horizontalmente em vez de verticalmente:

Barra de navegação responsiva com menu suspenso responsivo

Use a classe w3-mobile em todos os links, incluindo o contêiner suspenso, para criar uma barra de navegação responsiva com links suspensos responsivos.

Redimensione a janela do navegador para ver o efeito:

Fixed Navigation Bar

To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the bar and add the w3-top or w3-bottom class:

Vertical Navigation Bar

The w3-bar-block class is a container for displaying HTML elements vertically.

Collapsing the Navigation Bar

When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar.

In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack:

Side Navigation

The w3-sidebar class creates a side navigation:

Go to the next chapter to learn more about the side navigation.