Animiamoci con i CSS! - II Parte

Buon pomeriggio! Oggi la seconda (ma non ultima) parte della guida dedicata alla realizzazione di questo menù:

Home
Blog
Video
Curriculum
Contatti

Oggi vedremo lo stile da applicare ai vari elementi del menù, la prossima settimana completeremo il menù spiegando come realizzare le immagini con Photoshop.

Torniamo prima al codice Html, ve lo ricordate? Eccolo qui:

<div id="menu">
<ol>
   <li><a href="" class="home"><span>Home</span></a></li>
   <li><a href="" class="chi"><span>Blog</span></a></li>
   <li><a href="" class="gallery"><span>Video</span></a></li>
   <li><a href="" class="negozio"><span>Curriculum</span></a></li>
   <li><a href="" class="info"><span>Contatti</span></a></li>
</ol>
</div>

Ora vedremo che stili applicare ai vari elementi, ossia: il div menu, l'elenco dentro il div menu, ogni singolo elemento dell'elenco, le varie classi dei tag "<a>".

Dove andranno inseriti questi stili? Si possono inserire nel foglio di stile esterno del vostro sito o blog (un file con estensione .css) o all'interno della pagina stessa in cui risiede il menù ma racchiusi dai tag <style type="text/css"></style> (come ho fatto io in questo articolo). Iniziamo subito:

#menu {margin-top:20px;margin-bottom:20px;} - indica che il contenitore #menù (che contiene tutti gli elementi) dovrà essere posto a 20px dall'elemento sovrastante e 20 px dall'elemento sottostante. Nel mio caso, per posizionarlo all'interno di questo articolo sono stati sufficienti questi due attributi. La situazione può cambiare nel caso in cui lo vogliate inserire in punti particolari del vostro sito, blog ecc.

#menu ul {list-style-type: none; margin:0; padding:0;} - indica che la lista ul all'interno del contenitore #menu dovrà avere margini e padding pari a zero e non dovrà avere alcuno stile di lista. Per stile di lista intendo quei simboli che compaiono accanto ad ogni voce di una lista (cerchietto nero, quadratino ecc).

#menu li {margin: 0 0 1px 0; padding:0px;} - indica che ogni singolo elemento li della lista all'interno del contenitore #menu dovrà avere padding paria a zero, margini superiore-destro-sinistro paria a zero e margine dal basso pari a 1px. ("margin: alto destra basso sinistra"). Il margine di 1px dal basso serve per creare quel piccolo spazio che c'è tra un elemento ed un'altro, se così non fosse sarebbero tutti attaccati.

#menu li a {text-decoration:none;} - indica che ad ogni link all'interno di ogni elemento della lista non dovrà avere alcuna "decorazione". E' importante quando vogliamo evitare la sottolineatura di default che si ha nei link. Nel nostro caso non sarebbe comunque stata visibile perchè il nostro menù è grafico.

#menu li a span {visibility:hidden;} - indica che tutto ciò che è all'interno dei tag <span></span> non deve essere visibile a video. Nel nostro caso è utile per nascondere le varie voci del menù che altrimenti si andrebbero a sovrappore alle immagini.

Procediamo ora con gli stili applicati alle varie classi.

#menu a.home, a.chi, a.portfolio, a.blog, a.contatti {display: block; width: 316px; height:20px;} - ci indica che tutte le classi (home, chi, portfolio, blog e contatti) dovranno essere larghi 316px e alti 20px (l'ampiezza delle immagini) e dovranno essere considerati un elemento blocco (display:block). Non approfondirò qui questo attributo altrimenti non si finirà mai!

#menu a.home:hover, a.chi:hover, a.portfolio:hover, a.blog:hover, a.contatti:hover {margin-left:20px; display: block; height:20px; width: 316px;} - stessa situazione precedente a differenza che questi stili verranno applicati allo stato "hover" dei link (ossia quando ci si passa sopra con il puntatore del mouse). Stessa larghezza ed altezza, l'unica differenza si ha con il "margin-left:20px;" che serve per farli spostare di 20px a sinistra quando si passa sopra con il mouse!

Ed ora vediamo gli ultimi stili:

#menu a.home, a.home:hover {background: url(/CACHE/users/s/SabrinaS86/Image/QuickUpload4/menu1.png) no-repeat top;} - finalmente l'immagine di sfondo! con questa dicitura diamo alla classe home e al suo hover l'immagine di sfondo del bottone home (menu1.png), non ripetibile e posizionata in alto.

#menu a.chi, a.chi:hover {background:url(/CACHE/users/s/SabrinaS86/Image/QuickUpload4/menu2.png) no-repeat top;} - stessa identica cosa ma per il bottone chi a cui è stata data come sfondo l'immagine "menu2.png".

Come potete immaginare queste due righe vanno ripetute per ogni bottone.

Ecco fatto. Quanta roba è =D! La prossima settimana vi riporterò tutto il codice preciso e vi spiegherò come fare le immagini con Photoshop.