Menu CSS3 con effetto fade-out

Scritto da il 24/06/2010 in CSS e XHTML, Web Design - 1 Commento
2010-giu-24

Attenzione! Questo articolo é stato scritto qualche tempo fa, pertanto le informazioni contenute al suo interno potrebbero essere non del tutto aggiornate.

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:

</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>

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

#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;
}

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à:

#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;
}

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.

0saves
Se ti è piaciuto questo articolo puoi commentare oppure condividerlo online tramite i social network.
Se invece mi adori e non vuoi perderti nemmeno uno dei miei post puoi iscriverti al Feed RSS.

Autore

Appassionato di tecnologia, web e social media; scrive spesso e volentieri di argomenti inerenti il Web Design, Web Marketing, il mondo Mobile e qualche altra cosa. Collabora con HTML.it ed editori on-line nazionali. Segui @sickbrain

Un Commento su "Menu CSS3 con effetto fade-out"

  1. Mark893 19/04/2011 alle 16:09 ·

    Molto utile! Grazie e complimenti per il sito!

Scrivi il tuo commento