CSS  »  Articoli  »  Effetti con CSS 

Siamo ora arrivati alla parte principale del nostro menu accordion in stile Apple, ovvero il CSS. Il principio che sta alla base dell'esempio è semplice: si tratta di stabilire un'altezza fissa per i link del menu pari a 25px (ovvero l'altezza di ciascun elemento strong) per poi ripristinare la loro altezza naturale in fase :hover. Ecco il CSS per intero:

Vediamo brevemente il CSS del menu e i suoi tratti essenziali. Dopo aver eliminato margini, padding e marcatore da lista e list-item, si è assegnata una larghezza pari a 175 pixel e un bordo fine attorno al menu. I link vengono resi block-level, con altezza pari a 25 px e overflow impostato su hidden. Ciò fa si che dei link in stato normale venga mostrato solo l'elemento strong, anch'esso alto 25px. Quest'ultimo ha anche un line-height impostato, così da consentire la centratura verticale del testo.

Vale la pena soffermarsi un attimo sull'utilizzo del padding sui link e sugli elementi strong. Per i link viene specificato un padding sinistro di 10px, che vorremo poter recuperare sugli strong così da poter coprire tutta la larghezza del menu. Ci vengono in soccorso i margini negativi, o per l'esattezza i margini espandibili: attribuendo un margine sinistro negativo di 10px sugli strong, siamo infatti in grado di espanderli, per poi ripristinare lo spazio bianco attraverso un padding sinistro di pari valore.

Con la penulitima regola, in fase :hover i link assumono la loro altezza naturale, così da mostrare il rimanente testo che non rientra negli strong. Nella fase :hover dei link, infine, viene ripetuta orizzontalmente per gli elementi strong la porzione inferiore dell'immagine di sfondo anzichè quella superiore che viene mostrata a riposo, dando così un bell'effetto rollover.

Queste in breve le fasi di sviluppo del CSS, che si presenta semplice e leggero: sono bastate infatti appena sei regole. Buono il supporto cross-browser dell'esempio: è stato testato con successo su Internet Explorer dalla versione 5.5 alla 8, oltre che sulle ultime versioni di Firefox, Safari, Opera e Google Chrome. Codice e immagini sono disponibili per il download. Alla prossima.

Altri articoli

Altre guide

Altre newsletter