CSS  »  Articoli  »  Effetti con 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:

Figura 1 - Screenshot dell'esempio

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

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:

Altri articoli

Altre guide

Altre newsletter