Come creare e progettare una barra di navigazione in CSS?

Html

• Casa


• Di


• Servizi


• Contattaci

Qui abbiamo creato alcuni elementi di elenco e nidificato alcuni tag di ancoraggio all'interno del

CSS

Per impostazione predefinita

Gli elementi dovrebbero essere dati un margine e un'imbottitura di 0px e il tipo di stile elenco non dovrebbe essere impostato su nessuno. Infine, abbiamo progettato i tag di ancoraggio secondo il nostro desiderio.

Produzione

Una barra di navigazione orizzontale è stata creata utilizzando gli elementi dell'elenco inline.

Creazione di una barra di navigazione usando Div

Esploriamo come creare una barra di navigazione orizzontale usando Div.

Html


Casa
Di
Servizi
Contattaci


Nel codice HTML sopra, abbiamo creato un div e lo abbiamo assegnato il topnav classe. All'interno di quel Div, abbiamo nidificato quattro tag di ancoraggio e il primo tag di ancoraggio è stata data la classe attiva che consente all'utente di sapere su quale sezione si trova.

CSS

corpo
Margine: 0;

.topnav
Background-color: Gray;
Overflow: nascosto;

.topnav a
Float: a sinistra;
colore bianco;
Testo-align: centro;
imbottitura: 15px 18px;
DECORAZIONE DEL TESTO: Nessuno;
Font-size: 17px;

.topnav a: hover
Background-color: Ghostwhite;
colore nero;

.topnav a.attivo
Background-color: salmone;
colore bianco;


La classe Topnav viene utilizzata per aggiungere un colore di sfondo all'intera barra di navigazione. Abbiamo quindi disegnato i collegamenti presenti all'interno del contenitore Div secondo i nostri requisiti. Inoltre, abbiamo aggiunto lo styling per il mouse e l'effetto attivo sul collegamento di navigazione.

Produzione

Usando il div e il tag, abbiamo creato correttamente una barra di navigazione orizzontale.

Maggiori informazioni sulla barra di navigazione orizzontale!

Ci sono alcune altre cose divertenti che puoi aggiungere alla tua barra di navigazione, esploriamole.

Come far galleggiare un collegamento a destra in una barra di navigazione

Una cosa interessante che puoi fare è che puoi fluttuare un link presente all'interno della barra di navigazione a destra se vuoi. Imposta la proprietà float di quel particolare collegamento a destra e vedere la modifica.


Casa
Di
Servizi
Contattaci


Qui abbiamo impostato la proprietà float dell'ultimo tag di ancoraggio su giusto e inoltre gli abbiamo assegnato una classe attiva.

Produzione

Un collegamento è stato galleggiato a destra con successo.

Come creare una barra di navigazione fissa superiore

Per correggere la barra di navigazione in alto, dai al contenitore Div una posizione fissa e un po 'di larghezza.

Html


Casa
Di
Servizi
Contattaci




Alcuni contenuti.




Alcuni contenuti.




Alcuni contenuti.




Alcuni contenuti.




Alcuni contenuti.




Alcuni contenuti.




Alcuni contenuti.




Alcuni contenuti.




Alcuni contenuti.




Alcuni contenuti.




Per mostrare al funzionamento di una barra di navigazione top fissa abbiamo creato un palente di contenuti per dimostrare la barra di navigazione fissa.

CSS

.topnav
Background-color: Gray;
Overflow: nascosto;
Posizione: fissa;
Top: 0;
larghezza: 100%;

.contenuto
imbottitura: 20px;
Altezza: 1000px;


Stiamo assegnando alla barra di navigazione una posizione fissa e una larghezza del 100%. Inoltre, stiamo impostando la parte superiore su 0px.

Produzione

Una barra di navigazione top fissa è stata creata correttamente.

Come creare una barra di navigazione fissa inferiore

Puoi anche creare una barra di navigazione in basso fisso. Ecco come lo fai.

CSS

.topnav
Background-color: Gray;
Overflow: nascosto;
Posizione: fissa;
In basso: 0;
larghezza: 100%;


Qui oltre a dare alla barra di navigazione una posizione fissa, il fondo è stato impostato su 0px.

Produzione

La barra di navigazione in basso fisso funziona correttamente.

Come creare una barra di navigazione appiccicosa

Ai fini della creazione di una barra di navigazione appiccicosa, utilizzare il valore appiccicoso della proprietà di posizione CSS.

CSS

.topnav
Background-color: Gray;
Overflow: nascosto;
Posizione: appiccicoso;
Top: 0;


Qui abbiamo fissato la posizione della barra di navigazione.

Produzione

Una barra di navigazione appiccicosa è stata creata con successo.

Barra di navigazione verticale

Ai fini della creazione di una barra di navigazione verticale, tutto ciò che devi fare è impostare il display dei collegamenti all'interno della barra di navigazione per bloccare utilizzando la proprietà del blocco di visualizzazione CSS.

CSS

.topnav a
blocco di visualizzazione;
colore bianco;
Testo-align: centro;
imbottitura: 15px 18px;
DECORAZIONE DEL TESTO: Nessuno;
Font-size: 17px;


I tag di ancoraggio vengono visualizzati come elementi a livello di blocco per creare una barra di navigazione verticale.

Produzione

Una barra di navigazione verticale è stata creata con successo.

Come allineare la barra di navigazione verticale

Per allineare la tua barra di navigazione verticale puoi farla galleggiare nella posizione desiderata insieme a dargli un po 'di larghezza.

CSS

.topnav
Background-color: Gray;
larghezza: 30%;
Float: giusto;
Overflow: nascosto;


Qui stiamo impostando la proprietà float della destra e dando al Div una larghezza del 30%.

Produzione

La barra di navigazione verticale è stata galleggiata a destra.

Conclusione

Una barra di navigazione svolge un ruolo vitale per aumentare l'esperienza utente di un sito Web, pertanto è possibile creare una barra di navigazione dall'aspetto piacevole utilizzando vari approcci. Per la creazione di una barra di navigazione orizzontale è possibile utilizzare elementi elenchi HTML o combinazione di div e tag in CSS. Puoi fare molte cose divertenti con la tua barra di navigazione come, fluttuando un link a destra, renderlo una barra di navigazione fissa o renderlo appiccicoso secondo le tue esigenze. Oltre a questo, puoi anche creare una barra di navigazione verticale visualizzando collegamenti come elementi a livello di blocco. Questo post vi guida per creare e progettare una barra di navigazione.