CSS - Barra di navigazione: il tuo portale per la navigazione sul sito

Ciao a tutti, futuri sviluppatori web! Oggi ci imbarcheremo in un viaggio emozionante nel mondo delle barre di navigazione CSS. Come il tuo amico insegnante di informatica del quartiere, sono qui per guidarti attraverso questo aspetto essenziale del design web. Allora, prenditi la tua bevanda preferita, mettiti comodo e tuffiamoci!

Cos'è una barra di navigazione?

Prima di iniziare a codificare, capiamo cos'è una barra di navigazione. Immagina di essere in una grande biblioteca. Come trovi il libro che vuoi? Usi cartelli e目录, vero? Beh, una barra di navigazione è così per i siti web. È un insieme di link che aiutano gli utenti a muoversi facilmente sul tuo sito.

Ora, esaminiamo i diversi tipi di barre di navigazione e come crearli utilizzando CSS.

Barra di navigazione orizzontale CSS

Una barra di navigazione orizzontale è probabilmente il tipo più comune che vedrai sui siti web. È come una fila di pulsanti nella parte superiore della pagina.

Ecco un esempio semplice:

<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#about">Chi siamo</a></li>
<li><a href="#services">Servizi</a></li>
<li><a href="#contact">Contatti</a></li>
</ul>

E qui c'è il CSS per farlo sembrare bello:

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover {
background-color: #111;
}

Dividiamo questo:

1. Rimuoviamo i pallini dalla lista con list-style-type: none;
2. Flottiamo gli elementi della lista a sinistra per renderli orizzontali
3. Stiliamo i link per farli sembrare pulsanti
4. Aggiungiamo un effetto hover per renderlo interattivo

Barra di navigazione verticale CSS

A volte, potresti volere una barra di navigazione verticale, specialmente su dispositivi mobili o barre laterali. Ecco come puoi farlo:

<ul class="vertical-navbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">Notizie</a></li>
<li><a href="#contact">Contatti</a></li>
<li><a href="#about">Chi siamo</a></li>
</ul>

E il CSS:

.vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

.vertical-navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

.vertical-navbar li a:hover {
background-color: #555;
color: white;
}

La principale differenza qui è che non flottiamo gli elementi della lista. Invece, impostiamo una larghezza per l'intera barra di navigazione e lasciamo che gli elementi si impilino naturalmente.

Barra di navigazione a tendina CSS

Ora, aggiungiamo un po' di pepe con un menu a tendina! Questo è ottimo per organizzare le sottocategorie.

<ul class="navbar">
<li><a href="#home">Home</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Prodotti</a>
<div class="dropdown-content">
<a href="#">Laptop</a>
<a href="#">Tablet</a>
<a href="#">Smartphone</a>
</div>
</li>
<li><a href="#contact">Contatti</a></li>
</ul>

E il CSS:

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}

Questo CSS utilizza la pseudo-classe :hover per mostrare il contenuto del menu a tendina quando l'utente passa il mouse sul link "Prodotti".

Barra di navigazione fisso CSS

Una barra di navigazione fisso rimane in posizione anche quando si scorre. È come avere una guida personale che è sempre lì quando ne hai bisogno.

Per rendere una barra di navigazione fisso, dobbiamo aggiungere una linea al nostro CSS:

.navbar {
/* ... altri stili ... */
position: fixed;
top: 0;
width: 100%;
}

Questo tiene la barra di navigazione in alto nella schermata in ogni momento.

Barra di navigazione appiccicosa CSS

Una barra di navigazione appiccicosa è simile a una barra di navigazione fisso, ma diventa fisso solo dopo aver scroller past it. È come un amico che ti segue, ma solo dopo che hai camminato una certa distanza.

Ecco come fare una barra di navigazione appiccicosa:

.navbar {
/* ... altri stili ... */
position: sticky;
top: 0;
}

La differenza è che utilizziamo position: sticky invece di position: fixed.

Linee divisorie per la barra di navigazione

A volte, vuoi separare gli elementi della barra di navigazione con linee. Ecco un trucco per farlo:

.navbar li {
border-right: 1px solid #bbb;
}

.navbar li:last-child {
border-right: none;
}

Questo aggiunge una linea tra ogni elemento, tranne per l'ultimo.

Barra di navigazione verticale fisso

Ultimo, ma non meno importante, combiniamo ciò che abbiamo imparato per creare una barra di navigazione verticale fisso:

<ul class="fixed-vertical-navbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">Notizie</a></li>
<li><a href="#contact">Contatti</a></li>
<li><a href="#about">Chi siamo</a></li>
</ul>

E il CSS:

.fixed-vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}

.fixed-vertical-navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

.fixed-vertical-navbar li a:hover {
background-color: #555;
color: white;
}

Questo crea una barra di navigazione verticale che rimane sulla sinistra dello schermo mentre si scorre.

Conclusione

Eccoci arrivati, ragazzi! Abbiamo coperto una varietà di stili di barra di navigazione, da orizzontale a verticale, a tendina a fisso. Ricorda, la pratica fa perfezione, quindi non aver paura di sperimentare con questi stili e creare i tuoi design unici di barra di navigazione.

Ecco una tabella che riassume i diversi tipi di barra di navigazione che abbiamo coperto:

Tipo di barra di navigazione	Proprietà CSS chiave	Caratteristica principale
Orizzontale	float: left;	Elementi allineati orizzontalmente
Verticale	width: [valore];	Elementi impilati verticalmente
A tendina	:hover	Mostra opzioni aggiuntive alla hover
Fisso	position: fixed;	Rimane in posizione durante lo scorrimento
Appiccicosa	position: sticky;	Diventa fisso dopo aver scroller past it

Ricorda, codificare è come cucinare - inizi con ricette di base, ma man mano che diventi più a tuo agio, puoi iniziare ad aggiungere i tuoi own flavors. Quindi vai avanti, mescola e combina questi stili, e crea qualcosa di delizioso... voglio dire, visivamente accattivante!

Buon codice, e possa le tue barre di navigazione sempre portare a destinazioni emozionanti!

Credits: Image by storyset