Uso di setTimeout() in un menu a comparsa

**usecram** · 15-12-2006, 15:06

Sto costruendo un semplice menu a tendina.

Codice HTML:

codice:

<div id="navigation">
	<div>
		<h3>Voce1</h3>
		<ul>
		[*]Sottovoce1
		[*]Sottovoce2
		[*]Sottovoce3
		[*]Sottovoce4
		[/list]
	</div>
             ...
</div>

Tralasciando la formattazione CSS il codice JS si occupa, prima di nascondere tutti gli ul annidati nei div, dopodiché:

codice:

function menuEnable()  {
	var lstItem = document.getElementById("navigation").getElementsByTagName("div");
	for (i = 0; i < lstItem.length; i++)  {
		lstItem[i].onmouseover = function()  {
			lst = (this.lastChild.tagName == "UL")?this.lastChild :this.lastChild.previousSibling;
			lst.className = "show";
		}
		lstItem[i].onmouseout = function()  {
			lst.className = "hide";
		}
	}
}

Funziona bene, ora però vorrei che i sottomenu si aprissero non immediatamente ma dopo mezzo secondo. Ho provato ad utilizzare setTimeout in questo modo:

codice:

function menuEnable()  {
	var lstItem = document.getElementById("navigation").getElementsByTagName("div");
	for (i = 0; i < lstItem.length; i++)  {
		lstItem[i].onmouseover = function()  {
			lst = (this.lastChild.tagName == "UL")?this.lastChild :this.lastChild.previousSibling;
			ID= setTimeout("lst.className = 'show'", 500);
		}
		lstItem[i].onmouseout = function()  {
			clearTimeout(ID);
			lst.className = "hide";
		}
	}
}

Non va perché i menu si aprono dopo mezzo secondo però quando tento di accedere alle sottovoci si richiude subito. Mi direste dove sbaglio.

**usecram** · 15-12-2006, 18:00

UP

**andr3a** · 15-12-2006, 18:09

magari evita di usare tutte le variabili pubbliche/globali ... tipo ID, lst e perfino la i

codice:

function menuEnable()  {
	for(var	
		i = 0,
		lstItem = document.getElementById("navigation").getElementsByTagName("div"),
		showLst = function(lst){return function(){lst.className = "show"}};
		i < lstItem.length;
		i++
	){
		lstItem[i].onmouseover = function()  {
			this.lst = (this.lastChild.tagName == "UL")?this.lastChild :this.lastChild.previousSibling;
			this.ID = setTimeout(showLst(this.lst), 500);
		}
		lstItem[i].onmouseout = function()  {
			clearTimeout(this.ID);
			this.lst.className = "hide";
		}
	};
};

**usecram** · 15-12-2006, 21:28

Originariamente inviato da andr3a
magari evita di usare tutte le variabili pubbliche/globali ... tipo ID, lst e perfino la i

Spero mi si perdonino eventuali ingenuità dovute ad inesperienza.

Ho sostituito la mia funzione con la tua ma il problema persiste.

Non va perché i menu si aprono dopo mezzo secondo però quando tento di accedere alle sottovoci si richiude subito. Mi direste dove sbaglio

Ti posto il codice di pagina per intero così chi vuole lo può provare

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Esercitazione: Menu orizzontale a comparsa</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }
body { font: 76% arial, tahoma, sans-serif; }

div#navigation div { float: left; position: relative; }
div#navigation h3 { margin: 0; padding: 0; border-left: 1px solid #fff; background: #900; width: 125px; text-align: center; line-height: 20px; font-size: 110%; color: #fff; }
div#navigation ul { position: absolute; top: 20px; left: 0; margin: 0; padding: 0; background: #fff; }
div#navigation ul li { list-style-type: none; }
div#navigation a { display: block; border-right: 1px solid #000; border-bottom: 1px solid #000; border-left: 1px solid #000; background: #ffd; width: 124px; height: 20px; text-indent: 3px; text-decoration: none; line-height: 20px; color: #000; }
div#navigation a:hover { background: #ff9; }

div.jsok h3 { cursor: pointer; }
div#navigation h3.current { background: #f00; }
div#navigation h3.inactive { background: #900; }
div.jsok ul { display: none; }
div.jsok ul.show { display: block; }
div.jsok ul.hide { display: none; }

hr { clear: left; visibility: hidden; }
</style>

<script type="text/javascript">
window.onload = function()  {
	if (document.getElementById && document.getElementsByTagName)  {
		document.getElementById("navigation").className = "jsok";
		menuEnable();
	}
}

function menuEnable()  {
	for(var	
		i = 0,
		lstItem = document.getElementById("navigation").getElementsByTagName("div"),
		showLst = function(lst){return function(){lst.className = "show"}};
		i < lstItem.length;
		i++
	){
		lstItem[i].onmouseover = function()  {
			this.lst = (this.lastChild.tagName == "UL")?this.lastChild :this.lastChild.previousSibling;
			this.ID = setTimeout(showLst(this.lst), 500);
		}
		lstItem[i].onmouseout = function()  {
			clearTimeout(this.ID);
			this.lst.className = "hide";
		}
	};
};
</script>
</head>

<body>
<div id="navigation">
	<div>
		<h3>Voce1</h3>
		<ul>
		[*]Sottovoce1
		[*]Sottovoce2
		[*]Sottovoce3
		[*]Sottovoce4
		[/list]
	</div>
	<div>
		<h3>Voce2</h3>
		<ul>
		[*]Sottovoce1
		[*]Sottovoce2
		[*]Sottovoce3
		[*]Sottovoce4
		[*]Sottovoce5
		[/list]
	</div>
	<div>
		<h3>Voce3</h3>
		<ul>
		[*]Sottovoce1
		[*]Sottovoce2
		[*]Sottovoce3
		[*]Sottovoce4
		[*]Sottovoce5
		[*]Sottovoce6
		[/list]
	</div>
	<div>
		<h3>Voce4</h3>
		<ul>
		[*]Sottovoce1
		[*]Sottovoce2
		[*]Sottovoce3
		[*]Sottovoce4
		[*]Sottovoce5
		[*]Sottovoce6
		[/list]
	</div>
	<div>
		<h3>Voce5</h3>
		<ul>
		[*]Sottovoce1
		[*]Sottovoce2
		[*]Sottovoce3
		[*]Sottovoce4
		[*]Sottovoce5
		[*]Sottovoce6
		[/list]
	</div>
</div>

<hr />
<h3>Titolo di terzo livello</h3>


Paragrafo...seguito della pagina</p>
</body>

</html>

**andr3a** · 16-12-2006, 10:21

codice:

function menuEnable()  {
	for(var	
		i = 0,
		lstItem = document.getElementById("navigation").getElementsByTagName("div"),
		showLst = function(lst, cname){return function(){lst.className = cname}};
		i < lstItem.length;
		i++
	){
		lstItem[i].onmouseover = function()  {
			if(this.ID)
				clearTimeout(this.ID);
			this.lst = this.getElementsByTagName("ul").item(0);
			this.ID = setTimeout(showLst(this.lst, "show"), 500);
		};
		lstItem[i].onmouseout = function()  {
			clearTimeout(this.ID);
			this.ID = setTimeout(showLst(this.lst, "hide"), 500);
		};
	};
};

**usecram** · 16-12-2006, 12:06

Funziona e ti ringrazio ma non riesco a capire il mio errore, solo un conflitto di variabili o un uso improprio di setTimeout (o entrambe le cose)

Se potessi chiarirmi le idee...

**andr3a** · 16-12-2006, 19:18

Originariamente inviato da usecram
Funziona e ti ringrazio ma non riesco a capire il mio errore, solo un conflitto di variabili o un uso improprio di setTimeout (o entrambe le cose)

Se potessi chiarirmi le idee...

un problema di layout ... il bordo di un elemento non fa parte di mouseover o mouseout quindi non appena uscivi dall'elemento passando per il bordo l'onmouseout partive, ti cancellava l'intervallo e faceva sparire il tutto.

In questo modo si ha mezzo secondo entro il quale o si è usciti definitivamente o non ci si accorge del fatto che l'intervallo elimina viene richiamato tante volte quanti sono i passaggi sopra il bordo ma che non appena ti rientra nell'elemento del div viene ricancellato e riassegnato quello per mostrare.

Almeno dovrebbe essere così e me ne sono accorto muovendomi velocemente con FireFox ( quindi non è chiarissimo nemmen oa me il perchè di questo strano comportamento ma non voglio approfondire, dato che ho risolto

)

**usecram** · 17-12-2006, 12:16

Ok grazie ancora

Discussione: Uso di setTimeout() in un menu a comparsa

Strumenti discussione

Ricerca discussione

Visualizza

Uso di setTimeout() in un menu a comparsa

Permessi di invio