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

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

E tu fai già uso dei CSS3 per  i vostri progetti?

L'articolo Effetto rollover e animazione menu con i CSS3 sembra essere il primo su Target Web.it.