un menu

[Lady_B]

ciao a tutti,
è la prima volta che scrivo in questo forum...
vorrei chiedervi se avete idea di come sia realizzato questo menu:
http://www.statistica.uniparthenope.it non è realizzato in flash? nel codice si legge qualcosa del genere:

<SCRIPT language=JavaScript>

/*/* ****** Sezione personalizzabile ******* */

var QM=6; // quanti menu

var AM=16; // altezza dei menu

var qV1 = 3; // Quante Voci per la tendina 1
var qV2 = 2; // Quante Voci per la tendina 2
var qV3 = 4; // ecc.
var qV4 = 1;
var qV5 = 8;
var qV6 = 0;
var qV7 = 0;
var qV8 = 4;
var qV9 = 4;
var qV10 =4;
// in teoria ne regge fino a 99, eventualmente va allungato l'array TND (tendine). Pero', che me ne faccio di 99 menu?

var LT= new Array();
LT[0]=0;
LT[1]=110; // Larghezza Tendina 1
LT[2]=70; // Larghezza Tendina 2
LT[3]=140; // ecc.
LT[4]=140;
LT[5]=120;
LT[6]=120;
LT[7]=140;

var tC=500; // tempo di chiusura tendina dopo il mouseover
var tso=30; // tempo di successione scomparsa fra una voce e l'altra
var cMZ="#000066"; // colore menu "zero", cioe', quello che costituisce la barra
var cOmZ="#000066"; // colore menu zero al mouseOver
var cVM="#CC0000"; // colore voci menu
var cOV="#000066"; // colore voci al mouseOver

var aTb="center" // allineamento testo menu barra (possibilita': left, center, right)
var aTv="center" // allineamento testo voci menu (come sopra)

var CspB=0; // cellspacing (table barra)
var CpdB=0; // cellpadding (table barra)
var BrdB=0; // border (table barra)

var CspV=0; // cellspacing (table voci)
var CpdV=0; // cellpadding (table voci)
var BrdV=0; // border (table voci)

var dA=135; // distanza dall'alto
var dsxP=15; // distanza da sx del Primo Menu
var dMo=1; // distanza fra un menu e l'altro in orizzontale
var dMv=0; // distanza fra un menu e l'altro in verticale

var Voci= new Array();
Voci[0]=0;
Voci[1]=new Array('Attività istituto','Ricerche','Pubblicazioni','Attività collaterali');
Voci[2]=new Array('Personale','Docente 14/02/03','Non docente');
Voci[3]=new Array('Didattica','Sedute di esame','Programmi di studio','Dottorato di ricerca','Materiale didattico integrativo');
Voci[4]=new Array('Ricevimento studenti','Orari e sedi');
Voci[5]=new Array('Links utili','Statistica economica','ISTAT','Ist. G. Tagliacarne','CENSIS','MIUR','CNR','Altri links','Camera di Commercio di Napoli');
Voci[6]=new Array('Prenotazione esami');
Voci[7]=new Array('Programmi scaricabili','Acrobat Reader','WinZip','menu 7 link 3');

var Link=new Array();
Link[0]=0;
Link[1]=new Array('','http://www.statmat.uniparthenope.it/statmat/Ricerche.htm','http://www.statmat.uniparthenope.it/statmat/Pubblicazioni.htm','http://www.statmat.uniparthenope.it/statmat/AltreAttivita.htm');
Link[2]=new Array('','http://www.statmat.uniparthenope.it/statmat/Docenti.htm','http://www.statmat.uniparthenope.it/statmat/NonDocenti.htm');
Link[3]=new Array('','http://www.statmat.uniparthenope.it/statmat/SeduteEsame.htm','http://www.statmat.uniparthenope.it/statmat/Docenti.htm','/statmat/Dottorato.htm','/statmat/Indice-materiale-integrativo-StatisticaEconomica-Quintano.htm');
Link[4]=new Array('','/statmat/OrariRicevimento.htm');
Link[5]=new Array('','http://www.statecon.uniparthenope.it/','http://www.istat.it/','http://www.tagliacarne.it/','http://www.censis.it/','http://www.murst.it/','http://www.cnr.it/','http://www.economia.uniparthenope.it/SitiCollegati.htm','http://www.na.camcom.it/');
Link[6]=new Array('http://www.statistica.uniparthenope.it/prenotazione/prenota.asp');
Link[7]=new Array('Statmat/ProgrammiScaricabili.htm');


var Trg=new Array(); // Il link funziona SOLO se viene specificato un target. Per aprire la pag.htm nella finestra corrente scrivere 's' (sta per _self); per una nuova finestra scrivere 'b' (_blank); per un frame scrivere il 'NomeFrame'; per una popup scrivere 'p'.
Trg[0]=0;
Trg[1]=new Array('','s','s','s','','','','','','',''); // relativamente al primo menu: target per link 0 (quello della voce barra), di seguito il target per i link 1, 2 , 3, ecc.
Trg[2]=new Array('','s','s','','','','','','','',''); // relativamente al secondo menu (come sopra)
Trg[3]=new Array('','s','s','s','s','','','','','','');
Trg[4]=new Array('','s','','','','','','','','','');
Trg[5]=new Array('','s','s','s','s','s','s','s','s','','');
Trg[6]=new Array('s','','','','','','','','','','');
Trg[7]=new Array('s','','','','','','','','','','');


/* ****** Fine Sezione personalizzabile ******* */
/* */
/* Da qui in poi eventuali modifiche sono consigliabili solo a chi e' molto esperto di JavaScript, vi invitiamo a non */
/* intervenire se non siete sicuri di quel che fate, non vi garantiamo risposta alcuna */
/* */

var TND= new Array(qV1,qV2,qV3,qV4,qV5,qV6,qV7,qV8,qV9,qV10);


var DG=(document.getElementById);
var DL=(document.layers);
var DA=(document.all);

// le var sottostanti vanno pre-inizializzate per non creare errori

var cQV=""; // convenzionalmente Quale Voce, "convenzionalmente" significa: anziche' "barra1", scrivo barra101 o barra201 ecc.
var CmB=""; // chiudi menu Barra
var AmB=""; // apri menu Barra
var ndcB=""; // numero di comodo Barra
var ndcQVM=""; // numero di comodo Quante Voci Menu (idem)
var cQVM=""; //
var VZ="barra100"; //

function Overa(qVOver,NumConB,quale,colOv) { // quante voci (serve per chiuderle), numero convenzionale Barra, quale voce (1,2,3, ecc), OverMenuColor
window.clearTimeout(CmB);
if(quale==0) {
for(cs=ndcQVM; cs>ndcB; cs--) {
qVcs="barra"+cs; // quali voci chiudo subito
(DA)?document.all[qVcs].style.visibility="hidden" : (DL)? document.layers[qVcs].visibility="hide" : document.getElementById(qVcs).style.visibility ="hidden";
}
for (cbg=1; cbg<=QM; cbg++) {
rip="barra"+cbg+"00";
(DA)?document.all[rip].style.background=cMZ : (DL)? document.layers[rip].bgColor=cMZ : document.getElementById(rip).style.background=cMZ; //torna colore originario
}
}

cQV=qVOver+NumConB;
cQm="barra"+(quale+NumConB); // convenzionalmente quale menu
if (quale==0) {
for (i=NumConB+1; i<=cQV; i++) {
qualeVoceApro="barra"+i;
(DA)?document.all[qualeVoceApro].style.visibility="visible" : (DL)? document.layers[qualeVoceApro].visibility="show" : document.getElementById(qualeVoceApro).style.visib ility="visible";
}
}
(DA)?document.all[cQm].style.background=colOv : (DL)? document.layers[cQm].bgColor=colOv : document.getElementById(cQm).style.background=colO v;
}

function outMenu(qVOut,NumConBOut) {

cQVM=cQV;
cQV=qVOut+NumConBOut;
ndcB=NumConBOut;
ndcQVM=NumConBOut+qVOut;

VZ="barra"+ndcB; // Voce Zero


for (b=NumConBOut+1; b<=cQV; b++) {
qualeVoceB="barra"+b;
(DA)?document.all[qualeVoceB].style.background=cVM : (DL)? document.layers[qualeVoceB].bgColor=cVM : document.getElementById(qualeVoceB).style.backgrou nd=cVM; //torna colore originario
}
CmB=setTimeout('cB()',tC);
}

function cB() { // chiudi barra
if (cQVM>ndcB) {
qualeVoceCh="barra"+cQVM;
(DA)?document.all[qualeVoceCh].style.visibility="hidden" : (DL)? document.layers[qualeVoceCh].visibility="hide" : document.getElementById(qualeVoceCh).style.visibil ity="hidden";
cQVM--;
setTimeout('cB()',tso);
} else {
(DA)?document.all[VZ].style.background=cMZ : (DL)? document.layers[VZ].bgColor=cMZ : document.getElementById(VZ).style.background=cMZ; //torna colore originario
cQVM=ndcB;
}
}

function Vai(lnk,tg) {
if (tg=="s") {
self.location.href=lnk;
} else if (tg=="b") {
window.open(lnk,'','toolbar=yes,location=yes,direc tories=yes,status=yes,menubar=yes,scrollbars=yes,r esizable=yes,copyhistory=yes');
} else if (tg=="p") {
pp=window.open(lnk,'pp','toolbar=no,location=no,to p=50,left=50,width=300,height=300');
pp.focus();
} else if (tg!="" && tg!="s" && tg!="b" && tg!="p") {
top[tg].location.href=lnk;
}
}
</SCRIPT>

<SCRIPT language=javascript>
var CU = new Array(); // fra un momento aggiunge Cento Unita' all'ID di ciascun menu
CU[0]=0;
dispD=dsxP; // diverra' "Disponi Menu a dx"
diT=0; // decide indice tendine tendine (array TND)
for (ndc=0; ndc<QM; ndc++) { // "ndc" = numero di comodo
CU[CU.length]=CU[ndc]+100;
uni=ndc+1 // "ndc" da adesso, anziche' da zero, inizia da 1; "uni" sta per "unita'".
IDb="barra"+CU[uni]; // identificativo di ciascuna barra
dispD=dispD+dMo+LT[ndc];
ddx=dispD-dMo; // Disponi Menu a dx
qV="qV"+uni;
cu="CU["+uni+"]";


(DL)? document.writeln('<layer id="'+IDb+'" left="'+ddx+'" top="'+dA+'" width="'+LT[uni]+'" height="'+AM+'" bgcolor="'+cMZ+'" visibility="show" onmouseover="Overa('+qV+','+cu+',0,cOmZ);" onmouseout="outMenu('+qV+','+cu+');"><table width="'+LT[uni]+'" border="'+BrdB+'" cellspacing="'+CspB+'" cellpadding="'+CpdB+'" height="'+AM+'"><tr align="'+aTb+'" valign="middle"><td>'+Voci[uni][0]+'</td></tr></table></layer>') : document.writeln('<div id="'+IDb+'" style="position:absolute; width:'+LT[uni]+'px; height: '+AM+'px; background-color:'+cMZ+'; left: '+ddx+'px; top: '+dA+'; visibility: visible" onmouseover="Overa('+qV+','+cu+',0,cOmZ);" onmouseout="outMenu('+qV+','+cu+');" onclick="Vai(\''+Link[uni][0]+'\',\''+Trg[uni][0]+'\');"><table width="'+LT[uni]+'" border="'+BrdB+'" cellspacing="'+CspB+'" cellpadding="'+CpdB+'" height="'+AM+'"><tr align="'+aTb+'" valign="middle"><td style="cursor: pointer">'+Voci[uni][0]+'</td></tr></table></div>');

dispB=dA; // diverra' "Disponi Menu verso il Basso"
for (ndcV=0; ndcV < TND[diT]; ndcV++) { // "ndcV" = numero di comodo per le voci delle tendine.
uniV=ndcV+1 // "uniV" da adesso, anziche' da zero, inizia da 1.
IDb="barra"+(CU[uni]+uniV); // identificativo di ciascuna voce della tendina
dispB=dispB+dMv+AM; // Disponi Menu verso il Basso


(DL)? document.writeln('<layer id="'+IDb+'" left="'+ddx+'" top="'+dispB+'" width="'+LT[uni]+'" height="'+AM+'" bgcolor="'+cVM+'" visibility="hide" onmouseover="Overa('+qV+','+cu+','+uniV+',cOV);" onmouseout="outMenu('+qV+','+cu+');"><table width="'+LT[uni]+'" border="'+BrdV+'" cellspacing="'+CspV+'" cellpadding="'+CpdV+'" height="'+AM+'"><tr align="'+aTv+'" valign="middle"><td>'+Voci[uni][uniV]+'</td></tr></table></layer>') : document.writeln('<div id="'+IDb+'" style="position:absolute; width:'+LT[uni]+'px; height: '+AM+'px; background-color:'+cVM+'; left: '+ddx+'px; top: '+dispB+'; visibility: hidden" onmouseover="Overa('+qV+','+cu+','+uniV+',cOV);" onmouseout="outMenu('+qV+','+cu+');" onclick="Vai(\''+Link[uni][uniV]+'\',\''+Trg[uni][uniV]+'\');"><table width="'+LT[uni]+'" border="'+BrdV+'" cellspacing="'+CspV+'" cellpadding="'+CpdV+'" height="'+AM+'"><tr align="'+aTv+'" valign="middle"><td style="cursor: pointer">'+Voci[uni][uniV]+'</td></tr></table></div>');
}
diT++;
}
</SCRIPT>
... e poi continua
come fare per realizzarlo? Basta sostituire i valori? o non è così semplice?
grazie e un saluto a tutti

[dover]

Se Tu fai: FILE => Salva con nome, puoi salvarti in locale una copia e modifcare a piacimento i parametri: è semplice, ma necessita una certa dimestichezza almeno con l'HTML, se non Javascrit, linguaggio col quale è realizzato il menu. Ci sono anche le voci commentate per facilitarne la comprensione. Se poi non riesci, allora crea un'immagine che chiarisca la grafica, elenca le voci dei sottomenu, e assegna una dimensione al menu che Ti realizzeremo.
Ciao,
dover