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

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>
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
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>
J'ai volontairement mis à 2000ms afin de bien voir le comportement des fonctions.
Merci à tous pour votre aide.