Como criar e projetar uma barra de navegação no CSS?

Html

• Lar


• Sobre


• Serviços


• Contate-nos

Aqui criamos alguns itens de lista e aninhamos algumas tags de ancoragem dentro do

CSS

Por padrão

Os elementos devem receber uma margem e preenchimento de 0px, e o tipo de estilo de lista deve ser definido como nenhum. Por fim, projetamos as tags de âncora de acordo com o nosso desejo.

Saída

Uma barra de navegação horizontal foi criada usando itens de lista embutida.

Criando uma barra de navegação usando div

Vamos explorar como fazer uma barra de navegação horizontal usando o div.

Html


Lar
Sobre
Serviços
Contate-nos


No código HTML acima, criamos uma div e o designamos o Topnav aula. Dentro daquela div, aninhamos quatro etiquetas de âncora e a primeira etiqueta de âncora recebeu a classe ativa, o que permite ao usuário saber em que seção ele/ela está.

CSS

corpo
margem: 0;

.topnav
Background-Color: cinza;
estouro: oculto;

.topnav a
flutuar: esquerda;
cor branca;
Alinhamento de texto: centro;
preenchimento: 15px 18px;
Decoração de texto: Nenhum;
Size da fonte: 17px;

.Topnav A: Hover
Background-Color: Ghostwhite;
cor preta;

.topnav a.ativo
cor de fundo: salmão;
cor branca;


A classe Topnav é usada para adicionar uma cor de fundo a toda a barra de navegação. Em seguida, denominamos os links presentes dentro do contêiner DIV de acordo com nossos requisitos. Além disso, adicionamos o estilo de pairar e efeito ativo no link de navegação.

Saída

Usando a div e tag, criamos com sucesso uma barra de navegação horizontal.

Mais sobre a barra de navegação horizontal!

Existem mais algumas coisas divertidas que você pode adicionar à sua barra de navegação, vamos explorá -las.

Como flutuar um link para a direita em uma barra de navegação

Uma coisa interessante que você pode fazer é que você pode flutuar um link presente dentro da barra de navegação para a direita, se quiser. Defina a propriedade flutuante desse link específico para a direita e veja a mudança.


Lar
Sobre
Serviços
Contate-nos


Aqui, definimos a propriedade Float da última tag de âncora para a direita e, além disso, atribuímos uma classe ativa.

Saída

Um link foi flutuado para a direita com sucesso.

Como criar uma barra de navegação fixa superior

Para consertar a barra de navegação no topo, dê ao recipiente de div. Uma posição fixa e alguma largura.

Html


Lar
Sobre
Serviços
Contate-nos




Algum conteúdo.




Algum conteúdo.




Algum conteúdo.




Algum conteúdo.




Algum conteúdo.




Algum conteúdo.




Algum conteúdo.




Algum conteúdo.




Algum conteúdo.




Algum conteúdo.




Para mostrar o funcionamento de uma barra de navegação fixa, criamos um palade de conteúdo para demonstrar a barra de navegação fixa.

CSS

.topnav
Background-Color: cinza;
estouro: oculto;
Posição: fixado;
topo: 0;
largura: 100%;

.contente
preenchimento: 20px;
Altura: 1000px;


Estamos atribuindo à barra de navegação uma posição fixa e uma largura 100%. Além disso, estamos definindo a parte superior para 0px.

Saída

Uma barra de navegação superior fixa foi criada com sucesso.

Como criar uma barra de navegação fixa inferior

Você também pode criar uma barra de navegação fixa. Aqui está como você faz isso.

CSS

.topnav
Background-Color: cinza;
estouro: oculto;
Posição: fixado;
Inferior: 0;
largura: 100%;


Aqui, além de dar à barra de navegação uma posição fixa, o fundo foi definido como 0px.

Saída

A barra de navegação fixa do fundo está funcionando corretamente.

Como criar uma barra de navegação pegajosa

Com o objetivo de criar uma barra de navegação pegajosa, use o valor pegajoso da propriedade CSS Position.

CSS

.topnav
Background-Color: cinza;
estouro: oculto;
Posição: pegajoso;
topo: 0;


Aqui, definimos a posição da barra de navegação como pegajosa.

Saída

Uma barra de navegação pegajosa foi criada com sucesso.

Barra de navegação vertical

Com o objetivo de criar uma barra de navegação vertical, tudo o que você precisa fazer é definir a exibição dos links dentro da barra de navegação para bloquear usando a propriedade CSS Display Block.

CSS

.topnav a
exibição: bloco;
cor branca;
Alinhamento de texto: centro;
preenchimento: 15px 18px;
Decoração de texto: Nenhum;
Size da fonte: 17px;


As tags de âncora estão sendo exibidas como elementos no nível do bloco para criar uma barra de navegação vertical.

Saída

Uma barra de navegação vertical foi criada com sucesso.

Como alinhar a barra de navegação vertical

Para alinhar sua barra de navegação vertical, você pode flutuar na posição desejada, além de dar alguma largura.

CSS

.topnav
Background-Color: cinza;
largura: 30%;
Float: Certo;
estouro: oculto;


Aqui estamos definindo a propriedade Float da direita e dando à div uma largura de 30%.

Saída

A barra de navegação vertical foi flutuada para a direita.

Conclusão

Uma barra de navegação desempenha um papel vital para aumentar a experiência do usuário de um site; portanto, você pode fazer uma barra de navegação de aparência agradável usando várias abordagens. Para criar uma barra de navegação horizontal, você pode usar itens de lista HTML ou combinação de div e tags no CSS. Você pode fazer muitas coisas divertidas com sua barra de navegação, como flutuar um link para a direita, torná -lo uma barra de navegação fixa ou torná -la pegajosa de acordo com seus requisitos. Além disso, você também pode criar uma barra de navegação vertical exibindo links como elementos no nível do bloco. Esta postagem o guia tudo sobre criar e projetar uma barra de navegação.