HOMEGUIDA HTML

MENU CHE SI ANIMA AL PASSAGGIO DEL MOUSE

SECONDO ESEMPIO - pagina 1

 

Se passate con il mouse sopra il menu in alto potete vedere come intorno ad ogni scritta si formi una cornice con l'aggiunta, in alto a sinistra, di una piccola freccia, e, in basso, di uno o più link. In questo senso, il nostro menu è a tendina verticale, anche se lo sconsigliamo nel caso di molte voci a causa dello spazio eccessivo che potrebbe occupare nella pagina.
Come nel caso dell'esempio numero 1, se volete scaricare i codici andate pure a pagina 4 ma, se preferite, abbiamo preparato una spiegazione passo per passo.
Le spiegazioni seguono naturalmente quelle del primo esempio con alcune aggiunte.
Vi invitiamo a contattarci sia per chiarire qualche aspetto della spiegazione, sia per proporre le vostre realizzazioni che saremo felici di pubblicare.

SPIEGAZIONE

Con il solo effetto sull'immagine di sfondo, che siamo stati costretti ad aggiungere per far leggere le scritte, il nostro menu comparirebbe così:

HOME

GUIDA

JAVASCRIPT

GIOCHI

CONTATTI

Pagina iniziale di www.webfract.itTrucchi e malizieCalcolatrice, Codice coloriSudoku, crucipixel, gioco delle coppie...Scrivi, segnala un sito

Si tratta di una tabella di 2 righe e 5 colonne, che dovremo migliorare con l'uso dei fogli di stile, sia per la posizione a riposo che per quella attiva.
Il passaggio da una forma all'altra sarà guidato da 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:600;//Scrivete qui la larghezza in pixel della tabella
   cellSpacing=0 cellPadding=0;
   }
 table.tabella td.primo{//Stile delle celle della prima riga
   color: navy;
   width:20%; //Tutte le celle hanno la stessa larghezza (100% : 5 = 20%)
   height:24; //Tutte le celle hanno la stessa altezza di 24px
   
   //Formattazione del testo
   font-family: 'Comic Sans MS',Garamond, Verdana;
   font-size: 14px; 
   text-align: center;
   vertical-align: bottom; 
   
   //Bordi: stesso colore e stile, ma quelli laterali per il momento non si vedono (width:0px)
   border-top: 2px #b0c4de solid; 
   border-left: 0px #b0c4de solid;
   border-right: 0px #b0c4de solid;
   }
   
table.tabella td.secondo{//Stile delle celle della seconda riga
   color: navy; 
   height:24; 
   font-family: Verdana; 
   font-size: 10px; 
   vertical-align: top;
   border-bottom: 0px #b0c4de solid; 
   border-left: 0px #b0c4de solid;border-right: 0px #b0c4de solid;
   }
   
 //Effetto al passaggio del mouse sulla prima riga  
td.primo:Hover {color:#ff0000;text-decoration:none;font-style:italic;}

  p.collega {//Stile dei paragrafi dei collegamenti
  color: navy; 
  cursor:pointer;cursor:hand; 
  font-family: 'Comic Sans MS',Garamond, Verdana;  
  font-size: 10px; 
  text-align: left;
  vertical-align: bottom
  }
  
  //Stile delle parole calde dei paragrafi di classe collega
p.collega A:visited {color:navy;text-decoration:none;font-style:italic;}
p.collega A:link {color:navy;text-decoration:none;font-style:italic;}
p.collega A:Hover {color:red;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