Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Accordion in stile Apple con i CSS

Un semplice menu ispirato al design della Mela
Un semplice menu ispirato al design della Mela
Link copiato negli appunti

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:

Figura 1 - Screenshot dell'esempio
screenshot del menu accordion in stile apple

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:

Figura 2 - Immagine di sfondo dell'esempio
sfondo esempio

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:

<ul id="accordion">
    <li><a href="#"><strong>Link 1</strong> descrizione link 1</a></li>
    <li><a href="#"><strong>Link 2</strong> descrizione link 2</a></li>
    <li><a href="#"><strong>Link 3</strong> descrizione link 3</a></li>
    <li><a href="#"><strong>Link 4</strong> descrizione link 4</a></li>
    <li><a href="#"><strong>Link 5</strong> descrizione link 5</a></li>
</ul>

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:

ul#accordion, ul#accordion li{margin: 0;padding: 0;list-style: none}
ul#accordion{;border: 1px solid #9A9A9A;font-size: 12px}
ul#accordion a{display: block;;overflow: hidden;
    padding-left: 10px;text-decoration: none;color: #333}
ul#accordion strong{display: block;;line-;
    margin-left: -10px;padding-left: 10px;color: #FFF;
    background: #7E7E7E url(bk.png) repeat-x top}
ul#accordion a:hover{height: auto;overflow: auto}
ul#accordion a:hover strong{background:url(bk.png) repeat-x bottom}

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.


Ti consigliamo anche