Piccolo menu a tendina su webfract

HOME

GUIDA HTML

MENU CHE SI ANIMA AL PASSAGGIO DEL MOUSE

SECONDO ESEMPIO - pagina 4

Segue il codice da scaricare per provare il menu presentato a pagina 1. Se ci sono problemi, scrivete!

STILE

- Da inserire nell'intestazione della pagina

<style type="text/css">
table.tabella{ border-collapse:collapse; width:600; cellSpacing=0 cellPadding=0;}
 table.tabella td.primo{color: navy; width:20%; height:24; font-family: 'Comic Sans MS',Garamond, Verdana;  font-size: 14px; text-align: center;vertical-align: bottom; border-top: 2px #b0c4de solid; border-left: 0px #b0c4de solid;border-right: 0px #b0c4de solid;}
table.tabella td.secondo{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;}
td.primo:Hover {color:#ff0000;text-decoration:none;font-style:italic;}
p.collega {color: navy; cursor:pointer;cursor:hand; font-family: 'Comic Sans MS',Garamond, Verdana;  font-size: 10px; text-align: left;vertical-align: bottom}
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>

SCRIPT

- Da inserire nell'intestazione della pagina

<script>
/* Ti preghiamo di lasciare queste righe
* Visita http://www.webfract/it per spiegazioni ed altri esempi
*/
function cambia(n){
//Sostituite ААА con le vostre scritte
messaggi= new Array('','riga2[0] <a href="#">ААА</a> <a href="#">ААА</a>','riga2[1] <a href="#">ААА</a> <a href="#">ААА</a>','riga2[2] <a href="#">ААА</a> <a href="#">ААА</a>','riga2[3] <a href="#">ААА</a> <a href="#">ААА</a>','riga2[4]<a href="#">ААА</a> <a href="#">ААА</a>');
//Sostituite ААА con le vostre immagini
sfondo= new Array('','ААА','ААА','ААА','ААА','ААА');
    var x=document.getElementById('Menu').rows
    var riga1=x[0].cells
    var riga2=x[1].cells
    for (i=0;i<riga1.length;i++){
      if (i==n-1){
      riga1[i].style.width = "32%";
      riga1[i].style.letterSpacing = "3"
      riga1[i].style.background='url(' + sfondo[n] +') center left no-repeat'
      riga1[i].style.borderRightWidth='2px'
      riga1[i].style.borderLeftWidth='2px'
      riga2[i].innerHTML='<p class="collega">'+ messaggi[n]
      riga2[i].style.borderBottomWidth='2px'
      riga2[i].style.borderRightWidth='2px'
      riga2[i].style.borderLeftWidth='2px'
      }
    else {
       riga2[i].innerHTML=messaggi[0]
       riga1[i].style.letterSpacing = "1"
       riga1[i].style.width = "17%";
       riga1[i].style.background=sfondo[0];
       riga1[i].style.borderRightWidth='0px'
      riga1[i].style.borderLeftWidth='0px'
      riga2[i].style.borderBottomWidth='0px'
       riga2[i].style.borderRightWidth='0px'
      riga2[i].style.borderLeftWidth='0px'
    }
    }
}
function aggiorna(){
    var x=document.getElementById('Menu').rows
    var riga1=x[0].cells
    var riga2=x[1].cells
    for (i=0;i<riga1.length;i++){
    riga1[i].style.letterSpacing = "1"
       riga1[i].style.width = "20%";
       riga1[i].style.background='';
        riga1[i].style.borderRightWidth='0px'
      riga1[i].style.borderLeftWidth='0px'
      riga2[i].innerHTML=''
      riga2[i].style.borderBottomWidth='0px'
        riga2[i].style.borderRightWidth='0px'
      riga2[i].style.borderLeftWidth='0px'
    }
}
</script>

CODICE PER IL MENU

- Da inserire nel corpo della pagina

CODICE PER AGGIORNARE IL MENU

- Da inserire nel corpo della pagina, prima e dopo il menu

<div onMouseOver="aggiorna()"> inserite qui tutta la parte precedente... </div>
Ripetete per la parte seguente

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

©2010 www.webfract.it