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

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