Discussion :

[dark_vidor]

Bonjour,

J'ai réaliser en m'aidant d'un script cet exemple de menu : http://www.gt-trophy.com/phpbb3/styl...st4_racing.htm

J'aimerais pour des raisons pratiques convertir le script et utiliser jQuery (ce qui devrait me permettre d'enlever les bugs plus facilement ...)

Je pense qu'il y a moyen de grandement optimiser le code en passant par jQuery

Mais je galère, auriez vous des conseils, ou pourriez vous m'aider

Je ne trouve pas l'équivalent des fonctions timeout

Merci par avance

[dark_vidor]

Voila ce que j'ai fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script language="JavaScript" type="text/javascript">
var timeout    = 500;
var closetimer = 0;
 
function subnav_hide(){
	for( var i = 1 ; i <= 4 ; i++ )
	{
		$("#subnav_0"+i).css("display","none");
	}
}
 
function subnav_timer(){
	closetimer = window.setTimeout(subnav_hide, timeout);
}
 
function subnav_canceltimer(){
	if(closetimer)
	{
		window.clearTimeout(subnav_hide);
		closetimer = null;
	}
}
 
$(document).ready(function(){
 
	$("#item_01").mouseover( function() {
		subnav_canceltimer();
		subnav_hide();
   		$("#subnav_01").css("display","block");
	})
 
	$("#item_01").mouseout( function() {
		subnav_timer()	
	})
 
	$("#item_02").mouseover( function() {
		subnav_canceltimer();
		subnav_hide();
		$("#subnav_02").css("display","block");
	})
 
});
</script>

Et l'HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
    <div id="mainnav"> 
      <ul>
        <li id="item_01"><a href="#"><b>Accueil</b></a></li>
        <li id="item_02"><a href="#"><b>Forum</b></a></li>
        <li class="select"><a href="#"><u>Examples</u></a></li>
        <li><a href="#"><u>Menu</u></a></li>
        <li><a href="#"><b>Menu</b></a></li>
      </ul>
    </div>
    <div id="subnav">
	<div id="subnav_01" style="display: none;"><ul class="subnav"><li><a href="#">Sub Menu 1</a></li><li><a href="#">Sub Menu 2</a></li><li><a href="#">Sub Menu 3</a></li><li><a href="#">Sub Menu 4</a></li></ul></div>
	<div id="subnav_02" style="display: none;"><ul class="subnav"><li><a href="#">Sub Menu 1</a></li><li><a href="#">Sub Menu 2</a></li><li><a href="#">Sub Menu 3</a></li></ul></div>
	</div>

Doit y'avoir moyen de généraliser ça ? Mais comment ?

[danielhagnoul]

Bonsoir.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$("ul.mainnav li").mouseenter(function(){
	$("#subnav" + this.id.slice(4)).css("display","block");
});
 
$("ul.mainnav li").mouseleave(function(){
	subnav_hide();
});

[dark_vidor]

Ok

J'ai implémenté ça ... mais ça fonctionne pas terrible avec les timeout

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var current_subnav = 0;
var timeout    = 500;
var closetimer = 0;
 
function subnav_hide(){
	$("#subnav" + current_subnav ).css("display","none");
}
 
function subnav_timer(){
	closetimer = window.setTimeout(subnav_hide, timeout);
}
 
function subnav_canceltimer(){
	if(closetimer)
	{
		window.clearTimeout(subnav_hide);
		closetimer = null;
	}
}
 
 
 
$(document).ready(function(){
 
	$("#mainnav ul li").mouseenter(function(){
		subnav_canceltimer();
		//subnav_hide();
		current_subnav = this.id.slice(4);
		$("#subnav" + current_subnav ).css("display","block");
 
		$("#first").text( current_subnav );
	});
 
	$("#mainnav ul li").mouseleave(function(){
		subnav_timer()
		//subnav_hide();
	});
 
});

J'ai pas trop d'idée, comment faire ?

[danielhagnoul]

Bonsoir.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function subnav_canceltimer(){
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

Hier, lorsque j'ai regardé votre code, je n'ai pas bien compris pourquoi il utilise un setTimeout, c'est pourquoi je ne l'ai pas utilisé dans mon exemple.