Come creare una barra di navigazione per il tuo sito

Andiamo a creare una barra di navigazione in modo semplice e veloce

Creare una barra di navigazione di un sito web è semplicissimo, basta seguire i passaggi.
Di solito si parte a un elenco di elementi a (links) non ordinato:

<ul>
	<li><a href="#">Prova-1</a></li>
	<li><a href="#">Prova-2</a></li>
	<li><a href="#">Prova-3</a></li>
<ul>

Dopo il lavoro verrà gestito dal CSS:

ul
{
	width: 100%;
	heigth: 50px;
	padding: 0;
	text-align: center;
}
ul > li
{
	display: inline;
}
ul > li > a
{
	padding: 0 20px;
	text-decoration: none;
	color: black;
}
ul > li > a:hover
{
	color: purple;
}

 
Finito! Come potete vedere è semplicissimo. Andiamo comunque a spiegare il codice.
L’elenco non ordinato si comporta come un semplice div, dunque basterà definire le sue dimensioni e specificare l’allineamento del testo, in questo caso le varie voci del menu saranno allineate al centro. È importantissimo impostare il padding (almeno quello laterale) a 0 altrimenti gli elementi non verrano centrati correttamente!
Ora dobbiamo fare in modo che le varie voci dell’elenco non vengano messe una sotto l’altra ma una di fianco all’altra dunque gli elementi “li” dovranno avere la proprietà display inline.
Infine andiamo a impostare il padding laterale dei vari link per poter regolare la distanza tra di essi.
Potete provare il codice direttamente online con il nostro Editor HTML5 Online Italia!