Menu orizzontale con i css

Vediamo come creare un menu orizzontale partendo da un elenco puntato tramite i css:

Ecco il codice html con l’elenco che diventerà il nostro menu:
`



`

Senza alcune proprietà css avremmo dei semplici elenchi puntati che non sono certo adatti a chi desidera un menu orizzontale:

Ora passiamo al foglio di stile, abbiamo due modi per rendere il menu orizzontale e centrato:
<br /> div#navigation_1{text-align: center}<br /> li{display: inline} /*rendo gli elementi li inline*/<br />

Oppure
<br /> div#navigation_2{text-align: center}<br /> div#navigation_2 ul{width: 375px; margin: 0 auto; list-style-type:none;}<br /> div#navigation_2 li{float: left;width: 75px} /*Rendo gli elemnti li float*/<br />

Tutto ciò perché per creare un menu accessibile una elenco è molto meglio che mettere dei link uno dopo l’altro distanziati da uno spazio; il documento in quel caso non avrebbe una struttura logica e chiara per chi naviga con i browser testuali per esempio.
Ora basta sbizzarrirsi per rendere il menu gradevole a chi naviga con i css stando però siamo tranquilli che il tutto sarà comprensibile anche per chi i css li ha disattivati.

Visualizza l’esempio completo

Buona accessibilità a tutti allora.
Gabba Gabba Hey
Bonzo