L’impiego dei CSS3 è, almeno per quanto riguarda il sottoscritto, iniziato da parecchio, sopratutto per gli ottimi effetti, sia estetici che funzionali, che questi strumenti possono regalare. Certo i più oltranzisti potrebbero dire che i CSS3 non risultano ancora riconosciuti a pieno come standard, ma, considerato che sul mercato esistono già oggi browser che riescono ad implementarli, perché non iniziare già ad utilizzarli?

Ho pensato di creare un menu in orizzontale, funzionante solamente con CSS3 e HTML, senza l’impiego di jQuery e simili; dovrà avere un effetto fade-out sui bottoni del menu al momento in cui ci si passa sopra con il mouse.

Il codice HTML

Partiamo come sempre con il codice HTML, sfruttando l’ormai nota possibilità ce forniscono le liste non ordinate:

[code lang=”css”]</pre>
<div id="nav">
<ul>
<li><a class="selected" href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Chi siamo</a></li>
<li><a href="#">Servizi</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</div>
<pre>
[/code]

Ovviamente a questo punto ci concentreremo sull’aspetto più importante, il CSS3 e gli effetti che vogliamo ottenere.

[code lang=”css”]
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul li {
background-color: #666;
}
#nav ul li,
#nav ul li a {
float: left;
display: block;
}
#nav ul li a {
margin: 15px;
padding: 5px;
font-size: 24px;
color: #fff;
text-decoration: none;
}
#nav ul li a:hover,
#nav ul li a.selected {
background-color: #e5e5e5;
color: #272727;
}
[/code]

Sino a questo punto, niente di strano, abbiamo creato un controllo sulle liste impostandogli un aspetto semplice, il tutto si può vedere su questo primo esempio.

Ma se volessimo dare un pizzico di pepe a questo menu?

Utilizziamo i CSS3 e nello specifico andiamo ad aggiungere dei bordi arrotondati ai bottoni che compongono il menu, inoltre posizioniamo anche delle ombre e il nostro effetto fade-out una volta che il mouse passa sopra il menu stesso.
Per fare tutto questo é sufficiente modificare il div #nav ul li a con le seguenti proprietà:

[code lang=”css”]
#nav ul li a {
margin: 15px;
padding: 5px;
font-size: 24px;
color: #fff;
text-decoration: none;
-moz-border-radius:5px;
-moz-box-shadow:0 1px 3px rgba(0,0,0,.15);
-webkit-border-radius:5px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.15);
-webkit-transition:all 0.50s ease-out;
}
[/code]

Se tutto è andato a buon fine dovreste ottenere un risultato simile a questo esempio; ovviamente a questo punto vi potete sbizzarrire con la scelta dei colori e dei controlli estetici.