Nell’articolo di oggi vediamo come creare un’animazione rollover ai vostri menu grazie le nuove tecniche CSS3
[button link=”http://www.targetweb.it/tutorial/2013/effetto-rollover-menu-css3/index.html” color=”blue” target=”blank” size=”large”]Demo[/button]
Struttura HTML del menu
Per prima cosa come sempre prepariamo lo scheletro essenziale del nostro menu di navigazione a cui applicheremo l’effetto:
<ul id='nav'>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
</ul>
Stile CSS essenziale
A questo punto impostiamo lo stile css essenziale per disporre i vari elementi allineati orizzontalemente e per raffinare il nostro menu:
#nav{ background: #f7f7f7; border: 1px solid #ececec; overflow: hidden; padding: 5px 0px; }
#nav li {
list-style: none;
float: left;
background-color:#5994d3;
padding: 10px;
margin: 0px 5px;
}
#nav li a{
color:#fff;
}
#nav li:hover {
background-color:#366eac;
padding-left: 20px;
}
Come vedete ho già creato la proprietà hover con colore di background differente e padding sinistro aumentato. Tuttavia senza CSS3 noterete che l’effetto è abbastanza “grezzo”.
Novità CSS3
Grazie ai CSS3 a questo punto andiamo a rifinire l’animazione, è importante notare come il codice dell’animazione sotto-riportato non va inserito nello stato :hover dell’elemento bensì nello stato normale dello stesso. Questo perchè dobbiamo far capire al css che dopo che lo stato è mutato in :hover l’elemento deve tornare allo status iniziale secondo il duration riportato e non in modo “spartano” e immediato.
-moz-transition-property:background-color,padding-left;
-moz-transition-duration:1s;
-webkit-transition-property:background-color, padding-left;
-webkit-transition-duration:1s;
-o-transition-property:background-color, padding-left;
-o-transition-duration:1s;
transition-property:background-color, padding-left;
transition-duration:1s;
Di fatto la struttura è semplice:
- Per prima cosa si specifica il render -moz è per le vecchie versioni di firefox, -webkit per Chrome e Safari, e -o è per Opera. Per tutte le nuove versioni di tutti i browser varrà usata la proprietà “liscia” transition.
- La prima riga di codice definisce su quali regole css intervenire, nel nostro caso background-color e padding-left.
- La seconda riga invece fornisce la durata dell’animazione CSS3
Codice CSS Completo
#nav{ background: #f7f7f7; border: 1px solid #ececec; overflow: hidden; padding: 5px 0px; }
#nav li {
list-style: none;
float: left;
background-color:#5994d3;
padding: 10px;
margin: 0px 5px;
-moz-transition-property:background-color,padding-left;
-moz-transition-duration:1s;
-webkit-transition-property:background-color, padding-left;
-webkit-transition-duration:1s;
-o-transition-property:background-color, padding-left;
-o-transition-duration:1s;
transition-property:background-color, padding-left;
transition-duration:1s;
}
#nav li a{
color:#fff;
}
#nav li:hover {
background-color:#366eac;
padding-left: 20px;
}
Conclusioni
[button link=”http://www.targetweb.it/tutorial/2013/effetto-rollover-menu-css3/index.html” color=”blue” target=”blank” size=”large”]Demo[/button]
[viral-download file1=”http://www.targetweb.it/download/2013/effetto-rollover-menu-css3.zip” name1=”Scarica lo script!” url=”http://www.targetweb.it/effetto-rollover-e-animazione-menu-con-css3/” message=”Per scaricare il file completo devi condividere l’articolo su un social network. ” tweet=”#CSS3 – Effetto rollover menu” thankyou=”Grazie per aver condiviso, clicca sul link qui sotto:”/]
E tu fai già uso dei CSS3 per i vostri progetti?
