CSS  »  Articoli  »  CSS Menu 

Dopo diversi articoli ed esempi sui menu presenti qui sulla sezione CSS, tra cui Menu grafici con rollover e preload via CSS, un Menu a tabs con i CSS e i Menu a minitabs, vedremo in questo appuntamento una rivisitazione di una delle tecniche più note per avere menu a tab, ovvero le note Sliding Doors of CSS, di cui è disponibile anche una traduzione curata da GDesign.

Ecco subito l'esempio che accompagna l'articolo. Si tratta di un menu a tab con testo ridimensionabile: ciascuna voce del menu è infatti adattante in larghezza e scalabile in larghezza. Ecco un'immagine che riporta il menu visualizzato con dimensione del testo minima e massima in Internet Explorer:

Figura 1 - Menu a tab su Internet Explorer

Prima di procedere con grafica e CSS, diamo uno sguardo al markup: il menu è realizzato attraverso una lista non ordinata ul che racchiude i link. Ogni link testuale è contenuto uno span:

Da notare che la tab attiva, ovvero quella che indica la pagina/sezione corrente, è individuata attraverso un selettore di id, ovvero id="active".

Ora passiamo alla grafica: per il nostro menu sono necessarie due sole immagini, una per lo stato normale e una per lo stato attivo/hover. Ciascuna di esse è abbastanza larga e alta così da contenere le voci del menu anche nel caso l'utente abbia impostato un font molto grande. Ecco le immagini usate in formato PNG, ciascuna grande 170x70 pixel e con un peso di circa 700 byte:

Figura 2 - Immagini usata per la grafica del menu

Ora procediamo con il CSS: in generale è abbastanza semplice e usa abbondantemente la proprietà float. in effetti tutti gli elementi del nostro menu (lista, list-item, link e span) verranno dichiarati float per un totale di quattro float.

Partiamo dalla lista, su cui useremo la tecnica Float Nearly EveryThing, di cui abbiamo parlato nell'articolo Float: teoria e pratica. Rendendo float la lista e specificando una larghezza del 100% siamo infatti in grado di contenere le voci del menu. Elimineremo quindi i margini, il padding e il marcatore che caratterizzano le liste ed aggiungeremo un bordo inferiore grigio:

I list-item verranno affiancati attaverso la proprietà float, e separati da un margine sul lato destro di 0.2em (che corrisponde al 20% del font-size, ovvero due o tre pixel). Il padding di default viene azzerato:

Arriviamo così alla parte centrale dell'esempio, quella relativa ai link. Ache in questo caso, verranno resi float per essere così "auto-adattanti" in larghezza. Da evidenziare una nota teorica importante: elementi float sono resi automaticamente block-level. Verrà specificato un padding sinistro di 0.4em e la porzione sinisra dell'immagine che compone un tab. Verrà infine eliminata la sottolineatura e specificato il colore del testo:

Ora veniamo agli span. I link ci hanno permesso usare l'immagine di sfondo sul lato sinistro, grazie ad un padding sinistro: per gli span viene specificato un padding di 0.4em sugli altri tre lati e la porzione destra dell'immagine. Anche in questo caso, gli span vengono resi float, e per sistemare un difetto di IE viene forzato il cursore "a manina" con la dichiarazione cursor:pointer. Ecco la regola per intero:

Altri articoli

Altre guide

Altre newsletter