HOME | GUIDA | JAVASCRIPT | GIOCHI | CONTATTI |
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.
HOME | GUIDA | JAVASCRIPT | GIOCHI | CONTATTI |
Pagina iniziale di www.webfract.it | Trucchi e malizie | Calcolatrice, Codice colori | Sudoku, crucipixel, gioco delle coppie... | Scrivi, segnala un sito |
<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