Menu déroulant avec temporisation avant ouverture

**xess91** · 10/03/2011, 21h35

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

.

**javatwister** · 11/03/2011, 10h30

chez moi, ton script marche très bien;

**RomainVALERI** · 11/03/2011, 11h48

Oui, le sous-menu s'ouvre aussi avec le deuxième exemple fourni... qu'est-ce qui "ne marche pas" pour toi ?

**javatwister** · 11/03/2011, 11h58

j'ai juste mis un doctype et des balises de script correctes;

**RomainVALERI** · 11/03/2011, 12h03

Envoyé par javatwister

j'ai juste mis un doctype et des balises de script correctes;

... et rajouté les /body et /html qui manquaient dans l'extrait ^^ on est d'accord... mais en tout cas le sous-menu s'ouvre bien

**NoSmoking** · 11/03/2011, 14h08

Bonjour,
je note néanmoins un dysfonctionnement lorsque l'on glisse la mouse sur le sous menu ouvert, il y a disparition puis apparition.
Il y a en fait une succession de mouveover/mouseout qui s'enchaîne.

Menu déroulant avec temporisation avant ouverture

JavaScript

Vue hybride

Discussions similaires

Partager

Partager