Débutant. Menu déroulant incontrôlable

Version imprimable

Bonjour à toutes et tous,

Pour commencer sachez que mon niveau en JS est d’environ 0,001%. Autant dire que je n’y connais rien. Mes seules connaissances sont celles acquises en bidouillant le code ci-dessous. Ne trouvant rien de compréhensible à mon niveau en 3 jours de recherches et de prise de tête, je m’en remets à vous.

J’ai trouvé sur votre site un menu qui me convient et que j’ai façonné à mon gout. A savoir:

remplacer le «clik» par mouseover/out
remplacer slideToggle par fadeIn/Out
supprimer l’ajout de la class alt

Mon image-bouton dégradé sert, au survol, à déclencher l’apparition du menu. Jusque là tout va bien, j’ai tout compris.

Mon problème : je n’arrive pas à maintenir le sous-menu ouvert quand je passe d’un lien à l’autre. Le sous-menu se referme et se rouvre à chaque changement de lien.

Je ne comprends pas pourquoi, en commandant la class «menu_body» (donc la balise ul) qui représente la liste dans son ensemble, ce sont les sous-éléments (balise li) qui réagissent au lieu du parent (balise ul).

J’ai tenté de combiner toutes les classes et dans tous les sens mais rien n’y fait. Le code que j’ai mis ci-dessous est le meilleur résultat que j’ai pu obtenir. Merci d’avance à tous ceux qui me répondront.

Voici le code html+JS:
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Animated Drop Down Menu with jQuery</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jsfiles/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $('.container').mouseover(function () { $('ul.menu_body').fadeIn('medium'); }); $('.container').mouseout(function () { $('ul.menu_body').fadeOut('medium'); }); $('.container ul.menu_body li a').mouseover(function () { $(this).animate({ fontSize: "12px", paddingLeft: "40px" }, 150 ); }); $('ul.menu_body li a').mouseout(function () { $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 150 ); }); }); </script> </head> <body> <div class="container"> <img src="images/button2.gif" width="184" height="32" class="menu_head" /> <ul class="menu_body"> <li><a href="#">About Us</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Support Forums</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </body> </html>
Et voici le CSS:
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 @charset "utf-8"; /* CSS Document */ body{ background: #000; font-family: Arial, Helvetica, sans-serif; font-size:12px; margin: 0; padding: O; } .container{ margin: auto; padding: 0; display: table; } .menu_head{ border: 1px solid #ccc; } .menu_body{ margin:0; padding:0; display: none; } .menu_body li{ margin:0; padding:0; background: #000; border: none; list-style-type: none; border-left: 1px solid #333; } .menu_body li a{ color: #CCC; text-decoration: none; padding: 10px; display: block; } .menu_body li a:hover{ padding: 10px; font-weight: bold; color: #fff; text-decoration: underline; border-left: 5px solid #fff; }

Bonsoir

Je vois un menu, mais pas de sous-menu, et le menu reste ouvert au passage du pointeur.

Avec $('ul.menu_body li a'), vous sélectionnez les liens a contenu dans les li du ul.

Voici un exemple d'un menu avec sous-menu.

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
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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
 
		/* dvjh */
		h1 {
			text-align:center;
			font-style:italic;
			text-shadow: 4px 4px 4px #bbbbbb;
		}
		div#conteneur {
			width:95%;
			height:auto;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
		}
		div#affiche {
			clear:both;
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		ul.menuBody {
			color:white;
			background-color:black;
			width:160px;
			border:1px solid grey;
		}
		li.menuBody {
			color:white;
			background-color:black;
			padding:6px;
		}
		li.menuBody a {
			display:block;
			height:18px;
			color:white;
			background-color:black;
			font-size:1em;
			font-weight:normal;
			text-decoration:none;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
 	<script>
		$(function(){
			$('li.menuBody > a').hover(
				function(){
					$(this).css("font-weight","bold").animate({
						paddingLeft: "+=20px"
					}, 150);
				},
				function(){
					$(this).css("font-weight","normal").animate({
						paddingLeft: "-=20px"
					}, 150);
				}
			);
		});
	</script>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
		<ul class="menuBody">
			<li class="menuBody">
				<a href="#">About Us</a>
			</li>
			<li class="menuBody">
				<a href="#">Portfolio</a>
				<ul>
					<li class="menuBody">
						<a href="#">Portfolio 1</a>
					</li>
					<li class="menuBody">
						<a href="#">Portfolio 2</a>
						<ul>
							<li class="menuBody">
								<a href="#">Portfolio 21</a>
							</li>
							<li class="menuBody">
								<a href="#">Portfolio 22</a>
							</li>
							<li class="menuBody">
								<a href="#">Portfolio 23</a>
							</li>
						</ul>
					</li>
					<li class="menuBody">
						<a href="#">Portfolio 3</a>
					</li>
				</ul>
			</li>
			<li class="menuBody">
				<a href="#">Clients</a>
			</li>
			<li class="menuBody">
				<a href="#">Blog</a>
				<ul>
					<li class="menuBody">
						<a href="#">Blog 1</a>
					</li>
					<li class="menuBody">
						<a href="#">Blog 2</a>
					</li>
					<li class="menuBody">
						<a href="#">Blog 3</a>
					</li>
				</ul>
			</li>
			<li class="menuBody">
				<a href="#">Support Forums</a>
			</li>
			<li class="menuBody">
				<a href="#">Gallery</a>
				<ul>
					<li class="menuBody">
						<a href="#">Gallery 1</a>
					</li>
					<li class="menuBody">
						<a href="#">Gallery 2</a>
					</li>
					<li class="menuBody">
						<a href="#">Gallery 3</a>
					</li>
				</ul>
			</li>
			<li class="menuBody">
				<a href="#">Contact Us</a>
			</li>
		</ul>
 
		<div id="affiche"></div>
	</div>
</body>  
</html>

Déroulant incontrôlable

Bonsoir danielhagnoul,

Merci pour ta réponse.

-Je parle de sous-menu car l'onglet de départ qui, au survol ouvre le déroulant, sera le premier menu. Des déroulants comme celui-ci je vais en juxtaposer 6. Ils auront chacun 3-6 rubriques.
Expl: (onglet 1) "Espace pro" ...au survol le menu se déroule et le choix des différentes rubriques. Ensuite : (onglet 2) "Particulier". Et ainsi de suite.
Je considère le déroulant comme un sous-menu et l'onglet de départ comme le menu. Je me trompe peut-être.

- A moins que le code fonctionne différemment chez toi, pour moi, une fois le menu déroulé, si je passe du premier menu(About Us) au second(Portfolio), le déroulant se ferme puis se rouvre. Et ainsi de suite sur chaque item du menu.
Donc, l'action "mousout" que je voudrais sur l'ensemble du bloc menu_body s'applique en fait sur les balises "li" ou "a".

-Effectivement avec $('ul.menu_body li a') je sélectionne les liens "a". Mais cette partie du code je la contrôle bien. Le problème est plus haut.
Dans cette partie-ci :
Code:

1 2 3 4 5 6 7 8 9 10 <script type="text/javascript"> $(document).ready(function () { $('.container').mouseover(function () { $('ul.menu_body').fadeIn('medium'); }); $('.container').mouseout(function () { $('ul.menu_body').fadeOut('medium'); });
Voilà, si ces informations peuvent éclairer le sujet et bien tant mieux.
Je suis impatient d'avoir de vos nouvelles.

Ciao
Donvtt

31/07/2010, 02h03
danielhagnoul
Bonsoir.

Je ne dispose pas de votre environnement de travail, contexte de la page, images, etc. Comme je l'ai écrit, pour moi le menu (sous-menu pour vous) n'a pas de problème, mais j'ai bien entendu automatiquement utilisé hover() et non mouseover/mouseout qui est a proscrire depuis la version 1.3. En jQuery 1.4.2 hover() utilise mouseenter/mouseleave.
Code:

1 2 3 4 5 6 7 8 $('.container').hover( function(){ $('ul.menu_body').fadeIn('medium'); }, function(){ $('ul.menu_body').fadeOut('medium'); } );
J'ai également utilisé hover() dans l'exemple de menu.
02/08/2010, 10h53
donvtt

Bonjour danielhagnoul,

Me revoilà ! Fin de semaine chargée.

Et bien je pense que je vais tout simplement abandonner le JS pour l'instant et faire un beau menu en bon vieux CSS/html.:cry:

J'ai fini par chercher et trouver un autre code qui me semblait plus adapté. Je l'ai mis en place et miracle tout fonctionne. Tout s'est compliqué quand j'ai voulu reproduire le déroulant pour faire les autres boutons du menu.:arf:

J'ai essayer ce que tu m'as conseillé.
Avec .hover impossible. J'ai tout retourné, rien rien rien ne fonctionne.
Avec mouseenter/leave dans le code posté plus bas rien ne va.
Dans celui que j'ai trouvé ensuite ok. Mais "l'animation" n'est pas stable (se bloque, ...).

Quand j'ai une erreur d'affichage en CSS et/ou Html je sais retrouver aisément, si pas l'endroit exact de l'erreur, au moins son endroit approximatif dans le code. Avec JS pas du tout. C'est un calvaire que de tatillonner comme un aveugle.

J'ai été fort optimiste pour mon menu en JS. Je sais que je suis à deux doigts d'y arriver mais je n'ai pas le temps en ce moment de me pencher sérieusement sur l'étude du JS. Ce n'est pourtant pas l'envie qui manque.

Désolé d'avoir ouvert ce post pour rien et merci à toi pour ton aide.

Ciao
DonVtt
03/08/2010, 23h19
danielhagnoul

Bonsoir

Pour ne pas travailler en aveugle, il y a Firebug sous Firefox et un magnifique tutoriel pour apprendre à s'en servir.

Bonsoir à tous,

Je reviens à l'attaque.
Je suis têtu et me suis acharné sur mon problème et cette fois avec succès !

A force de triturer le code et lire de-ci de-là j'ai fini par le comprendre.
Je vous le mets ci-dessous.
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 <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $("#ongl_pro").mouseenter(function(){ $("ul#menu_pro").fadeIn({ width: "130px", opacity: 1, fontSize: "0.9em", }, 50 ); $('ul#menu_pro li a').mouseenter(function () { $(this).animate({ fontSize: "24px", paddingLeft: "5px" }, 100 ); }); $('ul#menu_pro li a').mouseleave(function () { $(this).animate({ fontSize: "14px", paddingLeft: "5px" }, 50 ); }); $("#ongl_pro").mouseleave(function(){ $("ul#menu_pro").fadeOut({ width: "130px", opacity: 0, fontSize: "0.9em", }, 50 ); }); });
Et voici le html:
Code:

1 2 3 4 5 6 7 8 9 <div id="div_menu"> <div id="ongl_pro"><a href="">Professionnels</a> <ul id="menu_pro" style="background-color: #990000;"> <li><a href="http://www.maquillarts.com">- Hello1</a></li> <li><a href="http://www.maquillarts.com">- Hello2</a></li> <li><a href="http://www.maquillarts.com">- Hello3</a></li> </ul> </div> </div>
Je ne vous mets pas le CSS car il est assez imposant. Ou alors il existe une façon de le rendre accessible durablement.

Le code fonctionne à merveille. Le balise "a" dans "ongl_pro" est une image que je place en CSS.

Voilà. Tout se déroule impeccablement.
Je reviendrai fermer la discussion plus tard.

A+ DonVtt