HOMEGUIDA HTML

MENU CHE SI ANIMA AL PASSAGGIO DEL MOUSE

PRIMO ESEMPIO - pagina 1

Provate a passare con il mouse sopra il menu in alto per vederne l'effetto: ogni cella scorre, e si visualizza una piccola immagine. Le immagini non sono il massimo, ma ovviamente ognuno di voi può sceglierne di mgliori!
Se volete scaricare i codici andate pure a pagina 5 ma, se preferite, abbiamo preparato una spiegazione passo per passo.
Anche se il menu è fra i più semplici - ma a noi piace perché è abbastanza originale - le spiegazioni non sono semplicissime, soprattutto per chi è alle prime armi... ma se avete pazienza...pian piano impareremo a costruire menu di complessità sicuramente maggore.
Come sempre, vi invitiamo a contattarci sia per chiarire qualche aspetto della spiegazione, sia per proporre le vostre realizzazioni che saremo felici di pubblicare.



SPIEGAZIONE

Il menu prende la forma indicata all'inizio della pagina attraverso l'uso dei fogli di stile e di javascript. Ma andiamo con ordine.

PASSO UNO - Creiamo uno stile per la tabella a riposo

<style type="text/css">

//Stile della tabella esterna di classe tabella
 table.tabella{  
   border-collapse:collapse; 
   width:720; //Inserite qui la larghezza desiderata
   cellSpacing=0 
   cellPadding=0;
   }
   
   //Stile delle celle della tabella di classe primo: come sono a riposo
 table.tabella td.primo{   
   color: navy; 
   cursor:pointer;cursor:hand; 
   width:20%;   //La larghezza, omogenea, tiene conto del fatto che abbiamo 5 voci e 100% : 5 = 20%
   height:60;  //Teniamo conto anche delle immagini di sfondo, altrimenti la tabella fluttua 
   
   //Tipo di font, dimensione dei caratteri ed allineamento 
   font-family: 'Comic Sans MS',Garamond, Verdana;  
   font-size: 16px; 
   text-align: left;
   vertical-align: bottom;
   
   //Spessore, colore ed aspetto dei bordi basso e destro che all'inizio non si vede perché ha 0px di spessore 
   border-bottom: 2px #b0c4de solid;
   border-right: 0px #b0c4de solid;
   }
   
 //Le parole calde al passaggio del mouse diventano in corsivo
   td.primo:Hover {text-decoration:none;font-style:italic;}
</style>

PRIMO ESEMPIO Pagina 1 2 3 4 5            SECONDO ESEMPIO Pagina 1 2 3 4          Indice     


©2010 www.webfract.it