Mootools Fx.slide bug sur menu horizontal
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:
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:
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,
