Bonsoir à tous,
Je cherche à réaliser un menu déroulant en javascript qui s'ouvre qu'après avoir laisser la souris dessus pendant 200ms.
J'ai un problème de parent/enfant lors de la mise en place de la temporisation...
Je vous montre deux scripts le premier ou le sous-menu s'ouvre directement(fonctionne) et le deuxième ou le sous-menu s'ouvre après 200ms :
Ouverture direct (fonctionne):
Ouverture temporisée (fonctionne pas):
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 <html> <head> <style> #menu { display: block; width: 100px; height: 30px; background: black; color: white; } #sous-menu { display: none; width: 100px; height: 100px; background: red; } </style> </head> <body> <span id="menu"> Menu <span id="sous-menu"> sous-menu </span> </span> <script> document.getElementById("menu").onmouseover = openMenu ; document.getElementById("menu").onmouseout = closeMenu ; function openMenu() { document.getElementById("sous-menu").style.display = "block" ; } function closeMenu() { document.getElementById("sous-menu").style.display = "none" ; } </script>
J'ai volontairement mis à 2000ms afin de bien voir le comportement des fonctions.
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 <html> <head> <style> #menu { display: block; width: 100px; height: 30px; background: black; color: white; } #sous-menu { display: none; width: 100px; height: 100px; background: red; } </style> </head> <body> <span id="menu"> Menu <span id="sous-menu"> sous-menu </span> </span> <script> document.getElementById("menu").onmouseover = openMenu ; document.getElementById("menu").onmouseout = closeMenu ; var timer = null ; function openMenu() { timer = setTimeout(goOpenMenu, 2000) ; } function goOpenMenu() { clearTimeout(timer) ; timer = null ; document.getElementById("sous-menu").style.display = "block" ; } function closeMenu() { document.getElementById("sous-menu").style.display = "none" ; } </script>
Merci à tous pour votre aide.
Partager