Accordion in stile Apple con i CSS

Apple è da sempre stata fonte ispirazione nel web design; ne abbiamo parlato
non molto tempo fa sul blog in Menu con i CSS: ispirazioni da Apple.
Tra le risorse citate figura Apple Style Accordion Menu, una soluzione per ottenere
un accordion in stile Apple con i CSS e jQuery.Incuriosito, ho pensato che fosse un buon esercizio di stile riprodurre
il menu utilizzando solo i CSS. Il risultato, a parte le animazioni e alcune
limitazioni insite nel markup, è piuttosto soddisfacente e ho pensato di presentarlo
in questo articolo.

Il concetto di menu accordion è infatti leggermente semplificato nell'esempio
di questo articolo: si tratta di un menu indicato per includere link e relative descrizioni testuali che vengono
mostrate solo al passaggio del mouse. Ecco uno screenshot:

La realizzazione dell'esempio attraversa sostanzialmente
tre fasi, che, come al solito, sono grafica, HTML e CSS. Per quanto riguarda la grafica,
nell'esempio è stata usata un'unica immagine di sfondo che combina assieme gli
stati normale e hover del menu. Si tratta di un'immagine di 50x50 pixel, in cui
le due sezioni orizzontali sono alte 25px ciascuna:

Per quanto riguarda il markup, la struttura utilizzata è una lista non ordinata che racchiude i link: al loro interno, vi è un elemento strong
che rappresenta il titolo vero e proprio, mentre quello che segue è la descrizione.
Ecco l'HTML dell'esempio:

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.