optimiser le code d'un menu

Version imprimable

21/01/2010, 18h35
dark_vidor

optimiser le code d'un menu

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 :ccool:

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

Je ne trouve pas l'équivalent des fonctions timeout :oops:

Merci par avance

Voila ce que j'ai fait :

Code:

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:

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 ?:?

Bonsoir.

Exemple :

Code:

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();
});

Ok ;)

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

Code:

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 ? :roll:

23/01/2010, 02h01
danielhagnoul
Bonsoir.
Code:

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.