Effetto rollover e animazione menu con i CSS3

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?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

tool-per-creare-una-documentazione-efficace
Up Next:

Tool per creare una documentazione efficace in pochi passi

Tool per creare una documentazione efficace in pochi passi