Discussion :

[Heilong]

Bonjour à tous,

J'ai crée un menu horizontal sur 2 niveaux, lorsque l'utilisateur passe la souris sur un titre du menu de niveau 1. Un sous menu correspondant est déroulé avec un effet Slide du framework Mootools.

Seulement j'ai un souci, si l'utilisateur passe sur un titre et sur un second titre assez rapidement, les 2 sous menu sont déroulé.
J'utilise pourtant un évènement "mouseout" sur ces titre pour que lorsque que la souris quitte le titre le menu s'enroule, avec le même effet.

Aussi j'aimerais que lorsque que la souris quitte le titre du menu, après un intervalle de 1 seconde le menu s'enroule sauf si la souris est au dessus du sous menu pour laisser l'utilisateur le choix de cliquer sur un lien, après quoi si la souris quitte le sous menu celui-ci s'enroule à nouveau.

voici mon code javascript :

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
var myMenu1;
var myMenu2;
 
window.addEvent('domready', function() {
 
	myMenu1 = new Fx.Slide('smenu1',{duration: 300});
	myMenu2 = new Fx.Slide('smenu2',{duration: 300});
 
	myMenu1.hide();
	myMenu2.hide();
 
	//var ActiveMenu = "";
 
	$('menu1').addEvent('mouseover', function(e){
		e.stop();
		myMenu2.hide();
		myMenu1.slideIn();
	});
 
	$('menu2').addEvent('mouseover', function(e){
		e.stop();
		myMenu1.hide();
		myMenu2.slideIn();
	});
});

Et le menu code HTML:

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
 
<div id="Menu">
 
	<div id="MenuLiens">
		<a href="#">HOME</a>
		<a id="menu1" href="#">FEATURES</a>
		<a href="#">BUY</a>
		<a id="menu2" href="#">SUPPORT</a>
	</div>
	<div id="down">
 
		<div id="smenu1">
			<a href="#">Product overview</a>
			<a href="#">Comparison</a>
			<a href="#">Testimonials</a>
			<a href="#">Specs</a>
		</div>
 
		<div id="smenu2">
			<a href="#">Overview</a>
			<a href="#">OIB hotline</a>
			<a href="#">Ticketing</a>
			<a href="#">FAQ</a>
			<a href="#">Forum</a>
		</div>
 
	</div>
</div>

Merci de votre aide,

[SPKlls]

J'ai un peu ce type de soucis mais sur un autre projet.. avec un mousemove
Quoiqu'il en soit, la 'solution' à laquelle j'ai pensé est la suivante :
créer un timer à chaque fois que l'event est appellé et qui vérifie selon un délai spécifié si la souris se trouve tjrs dessus, dans le cas contraire, on ferme..