• Programmazione » CSS » Tutorial CSS

Vediamo come creare un menù orizzontale animato grazie a CSS3. Esempi.

Oggi vedremo come realizzare un semplice menu animato tramite CSS3. Il menu di navigazione da sviluppare non farà uso di JavaScript: la realizzazione verrà posta in essere grazie alla proprietà “Transition”. Questa proprietà supporta tutti i maggiori browser ad eccezione di Internet Explorer (almeno per il momento). Il risultato di output in Microsoft IE sarà un comune effetto di rollover.

Quello che vogliamo creare oggi è un menu orizzontale animato. Per fare questo abbiamo bisogno in primis di un’immagine JPEG di dimensioni pari a 300 x 50 pixel che farà da sfondo. Tale immagine dovrà essere composta da 2 colori (per l’effetto normale e quello di transizione) a piacere. La composizione può avvenire “a piacere”: si può creare un’immagine con taglio obliquo al centro, con pattern quadrati o altro.

Il markup HTML

Il markup HTML del nostro menu avrà grossomodo questo aspetto:

<ul id="menu">  <li><a href="#">home</a></li>  <li><a href="#">prodotti</a></li>  <li><a href="#">servizi</a></li>  <li><a href="#">chi siamo</a></li>  <li><a href="#">contatti</a></li>   </ul>

Immagine di sfondo

Non dimenticare questo passaggio: un’immagine di sfondo da associare al foglio di stile. Dimensioni: 300 x 50 pixel.

Il foglio di stile CSS

display: inline;    list-style: none;    padding: 0;} #menu li a {    border: 1px solid white;   padding: 15px 20px 15px 20px;   text-decoration: none;   color:black;   margin-left: -5px;   /* immagine di background usata per l’animazione */   background-image: url('immagine-background.jpg');   background-position: left;   /* indica il tempo di transizione. Durata 0,8 secondi */-webkit-transition: all 0.8s ease-in-out;   -moz-transition: all 0.8s ease-in-out;    -o-transition: all 0.8s ease-in-out;} #menu li a:hover {    color: white;    background-position:right;}#menu li a:hover {    color: white;     background-position:right;}

Un’operazione semplice che permette a tutti di realizzare la propria opera in brevissimo tempo con risultati molto apprezzabili.