In molti degli articoli precedenti ci siamo occupati delle novità che i CSS3 includono nella specifica. In questo articolo vogliamo utilizzare queste nuove proprietà per realizzare un menu a comparsa interamente in CSS senza utilizzare Javascript.
Il risultato che otterremo al termine dell’articolo è quello in Figura 1. Un menu nascosto che verrà visualizzato al passaggio del mouse. L’ispirazione è stata presa da un menu presente su CSSPlay realizzato, però, con sole immagini.
Ecco la demo del nostro menu.
Nella realizzazione del menu sono state utilizzate diverse proprietà presenti nel CSS3. Nella seguente lista sono elencati gli articoli in cui sono state trattate tali proprietà:
- Bordi con i CSS3
- Ombra sui box con i CSS3
- Le pseudo-classi strutturali
- Trasformazioni 2D con i CSS3
- Effetti di transizione con i CSS3
La struttura del menu
Cominciamo a disegnare una piccola bozza grafica del menu che vogliamo realizzare (Figura 2):
Come possiamo vedere dalla Figura 2 la struttura è realizzata utilizzando semplicemente una lista non ordinata con due elementi. Nel primo elemento inseriremo la parte di menu che andrà nascosta, mentre nel secondo inseriremo la tab che resterà sempre visibile.
Realizziamo innanzitutto la struttura HTML che andremo poi a stilizzare con il foglio di stile. Il codice HTML di cui abbiamo bisogno è il seguente:
<ul id="menu">
<li id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Servizi</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</li>
<li id="tab">Menu</li>
</ul>Il primo elemento della lista contiene a sua volta una nuova lista non ordinata con i link che andranno a comporre il menu effettivo.
Cominciamo a dare un po’ di stile alla pagina e al menu. Innanzitutto inseriamo un reset CSS all’inizio del foglio di stile per azzerare le formattazioni dei browser; io ho scelto quello di Eric Meyer.
Diamo poi un colore di sfondo alla pagina e definiamo le dimensioni del menu. Il codice è il seguente:
body {
background-color: #f7f7f7;
color: #222;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 18px;
text-align:center;
}
ul#menu {
background: url('images/gradient.jpg') repeat-x;
border: 1px solid #ccc;
width: 750px;
margin: 0 auto;
}
ul#menu li#navigation { height: 150px; }
ul#menu li#navigation ul li {
float: left;
width: 150px;
}
ul#menu li#tab {
font-weight: bold;
line-height: 30px;
height: 30px;
}Ho scelto un piccolo gradiente come colore di sfondo del menu e un bordo un po’ più marcato. Il risultato ottenuto è il seguente:
Passiamo ora a dare uno stile ad ogni link. Ho scelto di dare un gradiente più marcato all’elemento della lista su cui si passa il mouse e di inserire un’immagine di background ad ogni link.
Il codice per lo stile dei link è il seguente:
ul#menu li#navigation ul li:hover {
background: url('images/hover.jpg') repeat-x;
}
ul#menu li#navigation ul li a {
color: #222;
display: block;
font-size: 0.9em;
font-weight: bold;
height: 150px;
line-height: 50px;
text-decoration: none;
width: 150px;
}A questo punto scegliamo un set di icone da utilizzare per gli elementi del menu. Io ho scelto il seguente set di icone:
Per assegnarle ai diversi link utilizziamo una delle pseudo-classi strutturali viste in un precedente articolo: nth-of-type(). Il codice è il seguente:
ul#menu li#navigation ul li:nth-of-type(1) a {
background: url('images/home.png') no-repeat center bottom;
}
ul#menu li#navigation ul li:nth-of-type(2) a {
background: url('images/about.png') no-repeat center bottom;
}
ul#menu li#navigation ul li:nth-of-type(3) a {
background: url('images/blog.png') no-repeat center bottom;
}
ul#menu li#navigation ul li:nth-of-type(4) a {
background: url('images/servizi.png') no-repeat center bottom;
}
ul#menu li#navigation ul li:nth-of-type(5) a {
background: url('images/contatti.png') no-repeat center bottom;
}Il risultato che abbiamo raggiunto a questo punto possiamo vederlo nella Figura 5.
Un po’ di effetti grafici
Siamo ormai a buon punto con il nostro menu. La prima cosa da fare adesso è arrotondare i bordi inferiori e inserire un effetto ombra. Il codice da aggiungere al menu è molto semplice, dobbiamo però fare attenzione ad inserire le proprietà compatibili con i browser:
ul#menu {
...
/* border-radius */
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
/* box-shadow */
box-shadow: 5px 5px 5px #888;
-moz-box-shadow: 2px 2px 5px #888;
-webkit-box-shadow: 2px 2px 5px #888;
}Effettuiamo anche una piccola trasformazione sui link al passaggio del mouse. Ho scelto la funzione scale() vista nell’articolo sulle trasformazioni 2D.
ul#menu li#navigation ul li a:hover {
transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
}Il risultato dopo i precedenti effetti è il seguente:
Effetti di transizione
Possiamo ora nascondere il menu e farlo visualizzare solo al passaggio del mouse. Per fare ciò inseriamo un margine superiore negativo di 150px all’intero menu per poi riportarlo a 0 al passaggio del mouse.
ul#menu {
...
margin-top: -150px;
}
ul#menu:hover{ margin-top: 0px; }Per concludere inseriamo adesso un effetto di transizione per far visualizzare il menu. Ho scelto l’effetto ease ma uno qualsiasi va benissimo. Il codice di cui abbiamo bisogno è il seguente:
ul#menu {
...
transition-property: margin-top;
transition-duration: 2s;
transition-timing-function: ease;
-webkit-transition-property: margin-top;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: ease;
-moz-transition-property: margin-top;
-moz-transition-duration: 2s;
-moz-transition-timing-function: ease;
-o-transition-property: margin-top;
-o-transition-duration: 2s;
-o-transition-timing-function: ease;
}Abbiamo completato il nostro menu. Il risultato che abbiamo ottenuto è il seguente.
Potete anche scaricare il file zip contenente tutti file dell’esempio.
Compatibilità con i browser
La compatibilità con i browser dipende principalmente da due fattori:
- supporto transizioni
- supporto pseudo-classi strutturali
L’effetto transizione garantisce comunque un corretto funzionamento in quanto anche i browser che non lo supportano (Firefox fino alla versione 3.6, Internet Explorer) visualizzeranno correttamente tutto il menu. Gli altri browser non presentano errori di visualizzazione nelle loro ultime versioni.
Internet Explorer non supporta neppure le pseudo-classi strutturali quindi non visualizzerà le icone dei link. Il problema è di facile soluzione; è sufficiente assegnare una classe ad ogni icona.
