Blog trasferito su
www.NoizExperience.com


10 luglio, 2008

Menù Rollover in puro Css senza pre-load


In un precedente articolo in cui si realizzava un menu rollover in puro css, abbiamo lasciato in sospeso il problema iniziale del pre-load. Vediamo con l'utilizzo di un piccolo trucco Css come puoi risolvere il problema.

Guarda l'esempio.

Per aggirare il caricamento della seconda immagine che farà il rollover non devi fare altro che creare due immagini in una, ossia, nello stesso file immagine inserisci nella parte alta l'immagine normale e nella parte bassa il rollover. Quindi posizionando il mouse sopra la voce del menù, non farai altro che spostare l'immagine verso il basso.

Ogni voce conterrà un'immagine di sfondo duplicata: nella fase normale si vedrà la parte superiore, passandoci sopra col mouse, si vedrà solo la parte inferiore. Così facendo si aggirà il pre-load perchè si carica solamente un'immagine doppia.


Vediamo quindi in pratica come si realizza, analizzando l'esempio:
Il codice Css:
#menu {margin:0; padding:0; list-style-type:none; height:60px}
#menu li {width:100px; height:60px; float:left; background-position:top}
#menu li:hover {background-position:bottom}
#menu a {width:100px; height:60px; line-height:60px; display:block; vertical-align:middle}
.home {background-image:url(menu_01.jpg);}
.works {background-image:url(menu_02.jpg);}
.blog {background-image:url(menu_03.jpg);}
.email {background-image:url(menu_04.jpg);}

Il codice Html
<ul id="menu">
<li class="home"><a href="#"></a></li>
<li class="works"><a href="#"></a></li>
<li class="blog"><a href="#"></a></li>
<li class="email"><a href="#"></a></li>
</ul>

Come vedi il Css si basa quasi unicamente sull' ID menu, il quale detta le regole per tutti gli elementi che ci stanno dentro. Poi per ogni voce viene indicata l'immagine da usare.
Il markup html invece è un semplice elenco che buttà giù la struttura.

Guarda l'esempio.
Scarica il sorgente e il file Photoshop.

Prova a realizzarlo anche tu prendendo spunto da questo esempio di base, e pubblica il link al tuo lavoro sui commenti. Io provvederò a pubblicarlo sul post con il link al tuo Blog.
Se non ci riesci o trovi qualche difficoltà, ti fornirò aiuto.


Articoli correlati per categorie



2 commenti!:

Bruno ha detto...

Non avevo mai pensato a far caricare una sola immagine e poi deciderne la posizione tramite CSS, ottimo post, grazie, adesso mi guardo il resto del blog!

marbio ha detto...

Ottimo tutorial! Lo terrò presente per il futuro!