Laps de temps avant menu disparaisse

**orphen** · 01/11/2007, 21h38

Oyé Oyé,

Actuellement en train de concevoir un menu déroulant je me trouve confronté à une interrogation.

Qui pourrait m'aider pour faire en sorte qu'il y ai un laps de temps pour que les utilisateurs lorsqu'ils quittent un élément de menu ce menu disparaissent.

Pour le moment des qu'on enleve la souris du menu celui ci disparait de suite.

www.fansyl.fr

Je tiens à préciser que je debute en javascript

Merci d'avance

**Madfrix** · 02/11/2007, 08h35

Va voir par là, tu trouveras sans doute ton bonheur.

http://www.google.fr/search?hl=fr&q=...ttimeout&meta=

**orphen** · 02/11/2007, 13h00

Le probleme c'est que je ne m'y connais pas en javascript.
A moi qu'il y ai un tuto qui explique vraiment les etapes (tuto que je ne trouve pas)
Je n'ai rien trouver de satisfaisant pour un debutant en javascript.

MErci a ceux qui prendront la peine de me guider

Je n'aurai pas poster si mon soucis se resumai à une recherche google.

Merci par avance

**Madfrix** · 02/11/2007, 14h32

Voici un bout de code qui t'aideras à comprendre le mécanisme de cette fonction. A toi de l'adapter à ton code ou de nous montrer ton code

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
 
<html>
 
<style>
 
#d1{position:absolute; top:100px; left:100px; width:100px; height:100px; border:solid black 1px;}
 
</style>
 
<script>
 
function fct1(){
window.setTimeout("document.getElementById('d1').style.visibility='visible'", 2000);
}
 
function fct2(){
window.setTimeout("document.getElementById('d1').style.visibility='hidden'", 2000);
}
 
</script>
 
<body>
 
 
<input type=button value=" Test " onMouseOver="fct1()" onMouseOut="fct2()">
 
<div id="d1">Ton menu ici</div>
 
 
</body>
 
</html>

**orphen** · 02/11/2007, 20h11

Merci de ton aide.

J'ai essayer d'attribuer la fonction sur mes bouton deroulant dans la classe onmouseout et hover qui existai deja pour les preload d'images.

Cela ne fonctionne pas je me permets donc de vous mettre mon code .js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

voici mon code css pour le menu.

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
* CSS Document */
 
/*Menu*/
 
#menu, #menu ul{ /*Le menu*/
		display:inline;
		margin-left:auto;
		margin-right:auto;
		width: 798px;
        padding : 0px; 
        list-style : none;
		line-height : 28px; /* hauteur pour chaque élément */
}
 
#menu a{  /* Contenu des listes */
        display : block; /* les liens deviennent type block */
        padding : 0;
		margin: 0;
}
 
#menu li{  /* Elements des listes */     
        float : left;
        border-right : 1px solid #737373; /* bordure grise */
}
 
/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li{
        border-right: 1px solid #737373 ;
}
 
#menu li ul{ /* Sous-listes */
		margin-top:0px;
        position: absolute; 
        width: 144px; /* Largeur sous-listes */
        left: -999em; 
}
 
#menu li ul ul
{
        margin    : -28px 0 0 115px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
        border-left     : 1px solid #737373 ; /* Petite bordure à gauche pour ne pas coller ... */     
}
 
/* ie ne reconnaissant pas le sélecteur */
html>body #menu li ul ul               
{
        border-left     : 1px solid #737373 ; 
}
 
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}
 
.accueil{
		width:113px;
		background-image:url(../images/general/menu/fond_accueil.jpg);
		text-align:center;
		font-family:Arial, Helvetica, sans-serif;
		color:#FFFFFF;
		font-size:12px;
		text-decoration:none;
}
 
.accueil:hover{
		width:113px;
		background-image:url(../images/general/menu/fond_accueil.jpg);
		text-align:center;
		font-family:Arial, Helvetica, sans-serif;
		color:#cb6709;
		font-size:12px;
		text-decoration:none;
}
 
.fond_bouton{
		display:block;
		width:113px;
		background-image:url(../images/general/menu/fond_bouton.jpg);
		text-align:center;
		font-family:Arial, Helvetica, sans-serif;
		color:#FFFFFF;
		font-size:12px;
		text-decoration:none;
}
 
.fond_bouton:hover{
		display:block;
		width:113px;
		background-image:url(../images/general/menu/fond_bouton.jpg);
		text-align:center;
		font-family:Arial, Helvetica, sans-serif;
		color:#cb6709;
		font-size:12px;
		text-decoration:none;
}
 
img{
display:block;
}

et ma div du menu

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
 
<div id="cont_menu">
<!--Menu-->
<ul id="menu"  >
		<!--Niveau 0-->
        <li><a href="#" class="accueil">Accueil</a></li>
       <!--Niveau 0-->
      <li>
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tutoriaux','','../images/general/menu/tutoriaux_hover.jpg',1)"><img src="../images/general/menu/tutoriaux.jpg" alt="Bouton tutoriaux" width="113" height="28"  id="tutoriaux"  /></a>
		<!--Niveau 1-->
				<ul>
                        <li class="fond_bouton">3D</li>
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('maya','','../images/general/menu/maya_hover.jpg',1)"><img src="../images/general/menu/maya.jpg" alt="Bouton Maya" width="113" height="28"  id="maya"  /></a>
						<!--Niveau 2-->
							<ul>
									<li><a href="#" class="fond_bouton">Interface</a></li>
									<li><a href="#" class="fond_bouton">Mod&eacute;lisation</a></li>
									<li><a href="#" class="fond_bouton">Texture</a></li>
									<li><a href="#" class="fond_bouton">Animation</a></li>
									<li><a href="#" class="fond_bouton">Dynamique</a></li>
									<li><a href="#" class="fond_bouton">Lumi&egrave;re</a></li>
									<li><a href="#" class="fond_bouton">Rendu</a></li>
							</ul>
						</li>
 
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('studiomax','','../images/general/menu/3d_studio_max_hover.jpg',1)"><img src="../images/general/menu/3d_studio_max.jpg" alt="Bouton 3D studio max" width="113" height="28"  id="studiomax"  /></a>
						<!--Niveau 2-->
							<ul>
									<li><a href="#" class="fond_bouton">Interface</a></li>
									<li><a href="#" class="fond_bouton">Mod&eacute;lisation</a></li>
									<li><a href="#" class="fond_bouton">Texture</a></li>
									<li><a href="#" class="fond_bouton">Animation</a></li>
									<li><a href="#" class="fond_bouton">Dynamique</a></li>
									<li><a href="#" class="fond_bouton">Lumi&egrave;re</a></li>
									<li><a href="#" class="fond_bouton">Rendu</a></li>
							</ul>
						</li>
 
                        <li class="fond_bouton">2D</li>
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Photoshop','','../images/general/menu/photoshop_hover.jpg',1)"><img src="../images/general/menu/photoshop.jpg" alt="Bouton Photoshop" width="113" height="28"  id="Photoshop"  /></a>
						<!--Niveau 2-->
							<ul>
									<li><a href="#" class="fond_bouton">Interface</a></li>
									<li><a href="#" class="fond_bouton">Photographie</a></li>
									<li><a href="#" class="fond_bouton">Web Design</a></li>
									<li><a href="#" class="fond_bouton">Couleurs</a></li>
							</ul>
						</li>
 
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('illustrator','','../images/general/menu/illustrator_hover.jpg',1)"><img src="../images/general/menu/illustrator.jpg" alt="Bouton Illustrator" width="113" height="28"  id="illustrator"  /></a>
						<!--Niveau 2-->
							<ul>
									<li><a href="#" class="fond_bouton">Interface</a></li>
							</ul>
						</li>
 
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('painter','','../images/general/menu/painter_hover.jpg',1)"><img src="../images/general/menu/painter.jpg" alt="Bouton Painter" width="113" height="28"  id="painter"  /></a>
						<!--Niveau 2-->
							<ul>
									<li><a href="#" class="fond_bouton">Interface</a></li>
									<li><a href="#" class="fond_bouton">Dessin Num&eacute;rique</a></li>
									<li><a href="#" class="fond_bouton">Peinture Num&eacute;rique</a></li>
							</ul>
						</li>
 
						<li class="fond_bouton">Compositing</li>
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('combustion','','../images/general/menu/combustion_hover.jpg',1)"><img src="../images/general/menu/combustion.jpg" alt="Bouton Combustion" width="113" height="28"  id="combustion"  /></a>
						<!--Niveau 2-->
							<ul>
									<li><a href="#" class="fond_bouton">Interface</a></li>
									<li><a href="#" class="fond_bouton">Tracking</a></li>
									<li><a href="#" class="fond_bouton">Effets Sp&eacute;ciaux</a></li>
							</ul>
						</li>
						<!--Niveau 1-->
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('internet','','../images/general/menu/internet_hover.jpg',1)"><img src="../images/general/menu/internet.jpg" alt="Bouton Internet" width="113" height="28"  id="internet"  /></a>
							<!--Niveau 2-->
							<ul>
									<li><a href="#" class="fond_bouton">Dreamweaver</a></li>
									<li><a href="#" class="fond_bouton">HTML</a></li>
									<li><a href="#" class="fond_bouton">CSS</a></li>
									<li><a href="#" class="fond_bouton">Javascript</a></li>
									<li><a href="#" class="fond_bouton">PHP</a></li>								
					</ul>
						</li>
						<!--Niveau 1-->
								<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('dessin','','../images/general/menu/dessin_hover.jpg',1)"><img src="../images/general/menu/dessin.jpg" alt="Bouton Dessin/Peinture" width="113" height="28"  id="dessin"  /></a>
									<ul>
										<li><a href="#" class="fond_bouton">Perspective</a></li>
										<li><a href="#" class="fond_bouton">Croquis</a></li>
										<li><a href="#" class="fond_bouton">Couleurs</a></li>
										<li><a href="#" class="fond_bouton">Aquarelle</a></li>
										<li><a href="#" class="fond_bouton">Gouache</a></li>							
									</ul>	
								</li>
				<!--Niveau 1-->
						<li><a href="#" class="fond_bouton">Photographie</a></li>
                </ul>
    </li>
       <!--Niveau 0-->
        <li>
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('projets','','../images/general/menu/projets_hover.jpg',0)"><img src="../images/general/menu/projets.jpg" alt="Bouton projets" width="113" height="28"  id="projets"  /></a>
		  <!--Niveau 1-->
				<ul>
                        <li><a href="#" class="fond_bouton">Inscription</a></li>
                        <li><a href="#" class="fond_bouton">Projets h&eacute;berg&eacute;s</a></li>
                </ul>
        </li>
       <!--Niveau 0-->
        <li>
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('formations','','../images/general/menu/formations_hover.jpg',1)"><img src="../images/general/menu/formations.jpg" alt="Bouton formations" width="113" height="28"  id="formations"  /></a>
		  <!--Niveau 1-->
				<ul>
                        <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('form_3d','','../images/general/menu/form_3d_hover.jpg',1)"><img src="../images/general/menu/form_3d.jpg" alt="Bouton 3D" width="113" height="28"  id="form_3d"  /></a>
						<!--Niveau 2-->
							<ul>
									<li><a href="#" class="fond_bouton">Inscription</a></li>
									<li><a href="#" class="fond_bouton">Calendrier</a></li>
									<li><a href="#" class="fond_bouton">Archives</a></li>
							</ul>
						</li>
                        <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Form_2D','','../images/general/menu/form_2d_hover.jpg',1)"><img src="../images/general/menu/form_2d.jpg" alt="Bouton 2D" width="113" height="28"  id="Form_2D"  /></a>
						<!--Niveau 2-->
						<ul>
									<li><a href="#" class="fond_bouton">Inscription</a></li>
									<li><a href="#" class="fond_bouton">Calendrier</a></li>
									<li><a href="#" class="fond_bouton">Archives</a></li>
									</ul>
						</li>
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('form_compositing','','../images/general/menu/form_compo_hover.jpg',1)"><img src="../images/general/menu/form_compo.jpg" alt="Bouton Compositing" width="113" height="28"  id="form_compositing"  /></a>
						<!--Niveau 2-->
						<ul>
									<li><a href="#" class="fond_bouton">Inscription</a></li>
									<li><a href="#" class="fond_bouton">Calendrier</a></li>
									<li><a href="#" class="fond_bouton">Archives</a></li>
						</ul>
						</li>
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('form_internet','','../images/general/menu/form_internet_hover.jpg',1)"><img src="../images/general/menu/form_internet.jpg" alt="Bouton Internet" width="113" height="28"  id="form_internet"  /></a>
						<!--Niveau 2-->
						<ul>
                        			<li><a href="#" class="fond_bouton">Inscription</a></li>
									<li><a href="#" class="fond_bouton">Calendrier</a></li>
									<li><a href="#" class="fond_bouton">Archives</a></li>						
						</ul>
						</li>
                </ul>
        </li>
       <!--Niveau 0-->
        <li>
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('societe','','../images/general/menu/societe_hover.jpg',1)"><img src="../images/general/menu/societe.jpg" alt="La soci&eacute;t&eacute;" width="113" height="28"  id="societe"  /></a>
		  <!--Niveau 1-->
				<ul>
                        <li><a href="#" class="fond_bouton">Fansyl</a></li>
                        <li><a href="#" class="fond_bouton">L'&eacute;quipe</a></li>
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('form_galerie','','../images/general/menu/form_galerie_hover.jpg',1)"><img src="../images/general/menu/form_galeries.jpg" alt="Bouton Galeries" width="113" height="28"  id="form_galerie"  /></a>
						<!--Niveau 2-->
						<ul>
									<li><a href="#" class="fond_bouton">3D</a></li>
									<li><a href="#" class="fond_bouton">2D</a></li>
									<li><a href="#" class="fond_bouton">Internet</a></li>						
							</ul>
						</li>
                </ul>
        </li>
		<!--Niveau 0-->
		 <li>
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('liens','','../images/general/menu/liens_hover.jpg',1)"><img src="../images/general/menu/liens.jpg" alt="Bouton liens" width="113" height="28"  id="liens"  /></a>
		   <!--Niveau 1-->
				<ul>
                        <li><a href="#" class="fond_bouton">Fansyl</a></li>
                       <li><a href="#" class="fond_bouton">Partenaires</a></li>
                </ul>
        </li>
		<!--Niveau 0-->
		<li><a href="#" class="accueil">Contact</a></li>
</ul>
</div>

Desoler de lachr mon code comme ca mais je n'arrive vraiment pas a utiliser cette fonction

Ma connaisance du javascript s'arrete pour le moment a la generation de code de dream pour les image survolées merci d'avance

**Madfrix** · 03/11/2007, 01h07

Apparemment ton div "cont_menu" couvre ton menu "Tutoriaux" (menu + sous-menus). Si ton objectif est de faire disparaître cet ensemble d'élements lorsque l'utilisateur sort de ce menu, il suffit d'agir sur ce div.
le problème est que l'élément "Tutoriaux" va disparaître également. Il faut donc que tu englobes tous tes éléments de ton div dans un autre div et que tu appelles la fonction sur ce div.

Essaies le code suivant :

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
 
<html>
 
<script>
 
function afficheMenu(nomDiv){
window.setTimeout("document.getElementById('"+nomDiv+"').style.visibility='visible'", 500);
}
 
function effaceMenu(nomDiv){
window.setTimeout("document.getElementById('"+nomDiv+"').style.visibility='hidden'", 500);
}
 
</script>
 
<body>
 
<div id="cont_menu" onMouseOver=>
 
  <div id="menusTutoriaux" onMouseOver="afficheMenu('menusTutoriaux');" onMouseOut="effaceMenu('menusTutoriaux');">
  // le code de tes menus ici
  </div> 
 
</div>
 
</body>
 
</html>

L'action de montrer/cacher le sous menus mettra donc 500 millisecondes à s'effectuer. Dis moi si ce script marche dans ton code stp. Après, je pourrais l'améliorer si tu veux pour qu'il n'y est pas de bug d'affichage si l'internaute se déplace trop rapidement dans tes menus

Laps de temps avant menu disparaisse

JavaScript

Vue hybride

Discussions similaires

Partager

Partager