Come si creano i tab espandibili ?
-->
Iniziamo con li creare il codice HTML per una semplice lista
<div id="menu"> <ul> <li><a href="">Mini</a></li> <li><a href="">Medium</a></li> <li><a href="">MegaMaxiSuperIperBIG</a></li> <li><a href="">Mini</a></li> <li><a href="">Little</a></li> </ul> </div>
Otterremo un risultato piú o meno simile a questo.
Ora aggiungiamo un po’ di CSS.
#menu ul {float:left;list-style-type:none;margin:0px;padding:0px;width:800px;}
#menu ul li {float:left;}
#menu ul li a {float:left;}
Come vedete per poter visualizzare la lista in orizzontale bisogna impostare gli elementi in modalità float:left.
Invece list-style-type:none rimuove i classici puntini dell’elenchi puntati, mentre width:800px non permetterá che la lista sia minore o maggiore di 800px.
Non preoccupatevi degli altri parametri perché li vedremo piú avanti.
Ora aggiungiamo le nostre belle immagini per rendere i Tab piú attrattivi, :-D.
#menu ul {float:left;list-style-type:none;margin:0px;padding:0px;width:800px;}
#menu ul li {float:left;background:url('start.gif') no-repeat;}
#menu ul li a {float:left;background:url('end.gif') no-repeat;background-position: 100% 0%;}
Voilá ed il risultato é questo.
Ovviamente non ci soddisfa tanto, quindi aggiungiamo un po’ di spazio quá e lá e cambiamo il colore del testo.
#menu ul {float:left;list-style-type:none;margin:0px;padding:0px;width:800px;}
#menu ul li {float:left;background:url('start.gif') no-repeat;margin-right:10px;}
#menu ul li a {float:left;background:url('end.gif') no-repeat;background-position: 100% 0%;padding-left:10px;padding-right:10px;font:12px Arial;text-decoration:none;font-weight:bold;color:#FFFFFF;line-height:30px;}
#menu ul li a:hover {text-decoration:underline;}
Ed ecco il risultato finale.
Se volete la versione originale del tutorial in lingua inglese ecco il link:
