Paolo De Feo
a- a+

Menų CSS3 Animato: come fare

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.



Ti potrebbe interessare anche

commenta la notizia

C'č 1 commento
Graziano
Hai qualche domanda da fare?