Menu a tendina

**nico1979** · 01-03-2004, 11:40

Vorrei creare il classico menu a tendina.
Ipotiziamo che ci sia un menu con 5 voci e prendiamo in considerazione la voce "Servizi". Io vorrei che al passaggio del mouse su la voce "Servizi" compaia la rispettiva tendina con i sottoservizi; se io alla voce "servizi" do uno show layer on mouse over e un hide layer on mouse out, appena cerco di andare sul layer "sottoservizi" il layer scompare. Se non gli do l'hide layer on mouse out riesco andare nel layer sottoservizi.
Per riassumere il risultato che vorrei ottenere è il classico menù a tendina tipo explorer (file, modifica, visulizza...)

Grazie per l'aiuto

**Xinod** · 01-03-2004, 16:48

il problema, se ho interpretato correttamente quanto da te scritto, è molto diffuso
e si risolverebbe con la gestione avanzata dell' oggetto event
(ci sono 3 ottimi articoli in pro.html.it)

dal momento che usi script pre-costruiti di dreamweaver (se non ho capito male)
potresti seguire un approccio diverso, molto + semplice

link menù
- onmouseout: il livello non sparisce subito ma dopo una temporizzazione
- onmouseover: prima vengono chiusi tutti i livelli (e eliminata l' eventuale temporizzazione) e poi mostrato il livello opportuno

link sub-menù
- onmouseout: come x i link menù
- onmouseover: elimina solo la temporizzazione

se non ti è chiaro come procedere a livello di script posta il codice che stai usando al momento,
mi risparmi di preparare un esempio generico che potresti trovare difficile da adattare

**nico1979** · 01-03-2004, 17:56

Grazie. Ancora non ho preparato la pagina; appena pronta pubblico il codice.

**nico1979** · 01-03-2004, 19:46

All'indirizzo www.my-media.com/elemaint puoi vedere il sito com'è attualmente programmato, i sottomenu di prodotti e servizi dovrebbero avere l'effetto descritto.
Grazie

**gladiatore** · 01-03-2004, 20:08

Questo l'ho fatto qualche tempo fa, credo ti possa essere utile se te lo studi.

codice:

<html>
<head>
<title>Show Hide layer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function showHideLayers(livello1,stato) {//NS
	if (navigator.appName == 'Netscape' && document.layers != null){	
		theObj = eval("document.layers['" + livello1 + "']");
		if (theObj) theObj.visibility = stato;
    	}
		else if (document.all != null){ //IE
		      if (stato == 'show') stato = 'visible';
		      if (stato == 'hide') stato = 'hidden';
		      theObj = eval("document.all['" + livello1 + "']");
		      if (theObj) theObj.style.visibility = stato;
		}
}

function colora(contenitore,divLayer,cosa){
	if (navigator.appName=="Netscape")
		if (cosa==1)
			document.layers["" + contenitore + ""].layers["" + divLayer + ""].bgColor="#FFCC00";
		else
			document.layers["" + contenitore + ""].layers["" + divLayer + ""].bgColor="#FFFFFF";
	else
		if (cosa==1)
			document.all["" + contenitore + ""].document.all["" + divLayer + ""].style.backgroundColor = "#FFCC00";
		else
			document.all["" + contenitore + ""].document.all["" + divLayer + ""].style.backgroundColor="#FFFFFF";
}

//-->
</script>
</head>
<body bgcolor="#FFFFFF" MARGINHEIGHT=0 MARGINWIDTH=0 TOPMARGIN=0 LEFTMARGIN=0>
<SCRIPT>
	if (navigator.appName=="Netscape"){//NS
      	//menu 1
		document.write("<layer id=menuGen1 top=0 left=0 width=144 height=20 visibility=show background-color=\"#FFCCFF\" z-index=1 onMouseOver=\"showHideLayers('container1','show')\"><IMG SRC=\"energia.gif\" WIDTH=144 HEIGHT=20 BORDER=0></layer>");
		document.write("<layer id=container1 top=0 left=0 width=146 height=40 visibility=hide onMouseOut=\"showHideLayers('container1','hide')\">");
		document.write("<layer id=menu1_1 top=20 left=0 width=144 onMouseOver=\"colora('container1','menu1_1',1);\" onMouseOut=\"colora('container1','menu1_1',0);\">MENU1_1</layer>");
		document.write("<layer id=menu1_2 top=40 left=0 width=144 onMouseOver=\"colora('container1','menu1_2',1);\" onMouseOut=\"colora('container1','menu1_2',0);\">MENU1_2</layer>");
		document.write("</layer>");
		//menu 2
      	document.write("<layer id=menuGen2 bgcolor=\"#99FFFF\" top=0 left=145 width=144 height=20 visibility=show background-color=\"#FFCCFF\" z-index=1 onMouseOver=\"showHideLayers('container2','show')\"><IMG SRC=\"clienti.gif\" WIDTH=144 HEIGHT=20 BORDER=0></layer>");
		document.write("<layer id=container2 top=0 left=145 width=146 visibility=hide z-index=2 onMouseOut=\"showHideLayers('container2','hide')\">");
		document.write("<layer id=menu2_1 top=20 left=0 width=144 onMouseOver=\"colora('container2','menu2_1',1);\" onMouseOut=\"colora('container2','menu2_1',0);\">MENU2_1</layer>");
		document.write("<layer id=menu2_2 top=40 left=0 width=144 onMouseOver=\"colora('container2','menu2_2',1);\" onMouseOut=\"colora('container2','menu2_2',0);\">MENU2_2</layer>");
		document.write("</layer>");
		//menu 3
      	document.write("<layer id=menuGen3 bgcolor=\"#99FFFF\" top=0 left=290 width=144 height=20 visibility=show background-color=\"#FFCCFF\" z-index=1 onMouseOver=\"showHideLayers('container3','show')\"><IMG SRC=\"progetto.gif\" WIDTH=144 HEIGHT=20 BORDER=0></layer>");
		document.write("<layer id=container3 top=0 left=290 width=146 visibility=hide z-index=2 onMouseOut=\"showHideLayers('container3','hide')\">");
		document.write("<layer id=menu3_1 top=20 left=0 width=144 onMouseOver=\"colora('container3','menu3_1',1);\" onMouseOut=\"colora('container3','menu3_1',0);\">MENU3_1</layer>");
		document.write("<layer id=menu3_2 top=40 left=0 width=144 onMouseOver=\"colora('container3','menu3_2',1);\" onMouseOut=\"colora('container3','menu3_2',0);\">MENU3_2</layer>");
		document.write("</layer>");
		//menu 4
      	document.write("<layer id=menuGen4 bgcolor=\"#99FFFF\" top=0 left=435 width=144 height=20 visibility=show background-color=\"#FFCCFF\" z-index=1 onMouseOver=\"showHideLayers('container4','show')\"><IMG SRC=\"nuove.gif\" WIDTH=144 HEIGHT=20 BORDER=0></layer>");
		document.write("<layer id=container4 top=0 left=435 width=146 visibility=hide z-index=2 onMouseOut=\"showHideLayers('container4','hide')\">");
		document.write("<layer id=menu4_1 top=20 left=0 width=144 onMouseOver=\"colora('container4','menu4_1',1);\" onMouseOut=\"colora('container4','menu4_1',0);\">MENU4_1</layer>");
		document.write("<layer id=menu4_2 top=40 left=0 width=144 onMouseOver=\"colora('container4','menu4_2',1);\" onMouseOut=\"colora('container4','menu4_2',0);\">MENU4_2</layer>");
		document.write("</layer>");
		}
	else{//IE
		//menu 1
		document.write("<div id=menuGen1 style='position:absolute; left:0px; top:0px; width:144px; height:20px; z-index:2; background-color: \"#FF0000\"; visibility: visible'  onMouseOver=\"showHideLayers('container1','show')\"><IMG SRC=\"energia.gif\" WIDTH=144 HEIGHT=20 BORDER=0>");
		document.write("<div id=container1 style='position:absolute; left:0px; top:0px; width:146x; height:40px; z-index:1; visibility: hidden;' onMouseOut=\"showHideLayers('container1','hide')\"><IMG SRC=\"x.gif\" WIDTH=144 HEIGHT=20 BORDER=0>");
		document.write("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=144><TR><TD BGCOLOR=\"#000000\">");
		document.write("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1 WIDTH=142>");
		document.write("<TR><TD BGCOLOR=\"#FFFFFF\" VALIGN=middle><div id=menu1_1 style='width:142px; height:18px' onMouseOver=\"colora('container1','menu1_1',1);\" onMouseOut=\"colora('container1','menu1_1',0);\"><A HREF=\"#\">MENU1_1</A></div></TD></TR>");
		document.write("<TR><TD BGCOLOR=\"#FFFFFF\" VALIGN=middle><div id=menu1_2 style='width:142px; height:18px' onMouseOver=\"colora('container1','menu1_2',1);\" onMouseOut=\"colora('container1','menu1_2',0);\"><A HREF=\"#\">MENU1_2</A></div></TD></TR>");
		document.write("</TABLE></TD></TR></TABLE></div></div>");
		//menu 2
		document.write("<div id=menuGen2 style='position:absolute; left:145px; top:0px; width:144px; height:20px; z-index:2; background-color: \"#FF0000\"; visibility: visible'  onMouseOver=\"showHideLayers('container2','show')\"><IMG SRC=\"clienti.gif\" WIDTH=144 HEIGHT=20 BORDER=0>");
		document.write("<div id=container2 style='position:absolute; left:0px; top:0px; width:146x; height:40px; z-index:1; visibility: hidden;' onMouseOut=\"showHideLayers('container2','hide')\"><IMG SRC=\"x.gif\" WIDTH=144 HEIGHT=20 BORDER=0>");
		document.write("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=144><TR><TD BGCOLOR=\"#000000\">");
		document.write("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1 WIDTH=142>");
		document.write("<TR><TD BGCOLOR=\"#FFFFFF\" VALIGN=middle><div id=menu2_1 style='width:142px; height:18px' onMouseOver=\"colora('container1','menu2_1',1);\" onMouseOut=\"colora('container2','menu2_1',0);\"><A HREF=\"#\">MENU2_1</A></div></TD></TR>");
		document.write("<TR><TD BGCOLOR=\"#FFFFFF\" VALIGN=middle><div id=menu2_2 style='width:142px; height:18px' onMouseOver=\"colora('container1','menu2_2',1);\" onMouseOut=\"colora('container2','menu2_2',0);\"><A HREF=\"#\">MENU2_2</A></div></TD></TR>");
		document.write("</TABLE></TD></TR></TABLE></div></div>");
		//menu 3
		document.write("<div id=menuGen3 style='position:absolute; left:290px; top:0px; width:144px; height:20px; z-index:2; background-color: \"#FF0000\"; visibility: visible'  onMouseOver=\"showHideLayers('container3','show')\"><IMG SRC=\"progetto.gif\" WIDTH=144 HEIGHT=20 BORDER=0>");
		document.write("<div id=container3 style='position:absolute; left:0px; top:0px; width:146x; height:40px; z-index:1; visibility: hidden;' onMouseOut=\"showHideLayers('container3','hide')\"><IMG SRC=\"x.gif\" WIDTH=144 HEIGHT=20 BORDER=0>");
		document.write("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=144><TR><TD BGCOLOR=\"#000000\">");
		document.write("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1 WIDTH=142>");
		document.write("<TR><TD BGCOLOR=\"#FFFFFF\" VALIGN=middle><div id=menu3_1 style='width:142px; height:18px' onMouseOver=\"colora('container3','menu3_1',1);\" onMouseOut=\"colora('container3','menu3_1',0);\"><A HREF=\"#\">MENU3_1</A></div></TD></TR>");
		document.write("<TR><TD BGCOLOR=\"#FFFFFF\" VALIGN=middle><div id=menu3_2 style='width:142px; height:18px' onMouseOver=\"colora('container3','menu3_2',1);\" onMouseOut=\"colora('container3','menu3_2',0);\"><A HREF=\"#\">MENU3_2</A></div></TD></TR>");
		document.write("</TABLE></TD></TR></TABLE></div></div>");
		//menu 4
		document.write("<div id=menuGen4 style='position:absolute; left:435px; top:0px; width:144px; height:20px; z-index:2; background-color: \"#FF0000\"; visibility: visible'  onMouseOver=\"showHideLayers('container4','show')\"><IMG SRC=\"nuove.gif\" WIDTH=144 HEIGHT=20 BORDER=0>");
		document.write("<div id=container4 style='position:absolute; left:0px; top:0px; width:146x; height:40px; z-index:1; visibility: hidden;' onMouseOut=\"showHideLayers('container4','hide')\"><IMG SRC=\"x.gif\" WIDTH=144 HEIGHT=20 BORDER=0>");
		document.write("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=144><TR><TD BGCOLOR=\"#000000\">");
		document.write("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1 WIDTH=142>");
		document.write("<TR><TD BGCOLOR=\"#FFFFFF\" VALIGN=middle><div id=menu4_1 style='width:142px; height:18px' onMouseOver=\"colora('container4','menu4_1',1);\" onMouseOut=\"colora('container4','menu4_1',0);\"><A HREF=\"#\">MENU4_1</A></div></TD></TR>");
		document.write("<TR><TD BGCOLOR=\"#FFFFFF\" VALIGN=middle><div id=menu4_2 style='width:142px; height:18px' onMouseOver=\"colora('container4','menu4_2',1);\" onMouseOut=\"colora('container4','menu4_2',0);\"><A HREF=\"#\">MENU4_2</A></div></TD></TR>");
		document.write("</TABLE></TD></TR></TABLE></div></div>");
		}
</SCRIPT>
</body>
</html>

Ciao

**nico1979** · 01-03-2004, 20:16

Grazie,
dovrebbe essere perfetto!
Devo solo studiarmi un po' i vari parametri per modificarlo secondo le mie esigenze.

**gladiatore** · 02-03-2004, 11:21

prego non cìè di che!!!
:adhone:

**moretti_web** · 21-04-2004, 10:06

Ciao, questo script mi sarebbe utile, ma come faccio se il menu a tendina deve avere una posizione variabile???

Cioè se l'intero script fosse racchiuso al centro di una tabella al 100% e che quindi si ridimensiona al ridimensionamento dello schermo?

Per quanto ci capisco.... nella riga:
style='position:absolute; left:0px; top:0px;

ho messo "relative" in "position" ed ho cancellato left e top....mi funziona ma causa problemi di allineamento alle celle vicino!

Aiutatemi vi pregoooooo.....sono sotto a tempi ristrettissimi!!!!

Grazie in anticipo.

Discussione: Menu a tendina

Strumenti discussione

Ricerca discussione

Visualizza

Menu a tendina

Permessi di invio