Menu orizzontale con i css
8 Novembre 2007Vediamo 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:
<div id="navigation_1">
<ul>
<li id="home"><a href="#" title="Home ">Home</a></li>
<li id="contatti"><a href="#" title="Contatti">Contatti</a></li>
<li id="azienda"><a href="#" title="azienda">azienda</a></li>
</ul>
</div>
<div id="navigation_2">
<ul>
<li id="home"><a href="#" title="Home ">Home</a></li>
<li id="contatti"><a href="#" title="Contatti">Contatti</a></li>
<li id="azienda"><a href="#" title="azienda">azienda</a></li>
</ul>
</div>
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:
div#navigation_1{text-align: center}
li{display: inline} /*rendo gli elementi li inline*/
Oppure
div#navigation_2{text-align: center}
div#navigation_2 ul{width: 375px; margin: 0 auto; list-style-type:none;}
div#navigation_2 li{float: left;width: 75px} /*Rendo gli elemnti li float*/
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.
Buona accessibilità a tutti allora.
Gabba Gabba Hey
Bonzo