tutoriel menu déroulant animé avec jquery

VIRGINIE87 · 31/03/2011, 15h44

bonjour,

j'ai réalisé le tutoriel http://dmouronval.developpez.com/tut...ry/menu-anime/
Et maintenant j'essaie de l'adapter à ce que je souhaite.
Je souhaite réaliser trois autres menus identiques disposés horizontalement, qui se déroulent seulement si les 3 autres menus ne sont pas déroulés.

Ce que je souhaiterai obtenir :
- centrer mon menu
- quand je déroule un menu, les 3 autres menus ne doivent pas etre actif (c'est à dire ne pas descendrent )
-quand un menu est déroulé les 3 autres ne doivent pas être déroulés
que me conseillez vous ?

voici ce que j'obtient :
http://lavalettevirginie.free.fr/Menu/example.html

merci d'avance

RunCodePhp · 31/03/2011, 16h10

Salut

Le lien vers la le tutorial présente un problème.
C'est ceci à mon sens : http://dmouronval.developpez.com/tut...ry/menu-anime/

Pour ton problème, je n'est pas de solution, je suis loin d'avoir tout parcouru, mais dès le début un truc me choc, c'est que les 4 blocs de menus ce trouvent dans des cellules d'un tableau.

Ne serait ce que pour une question de sémantique, on n'utilise pas de tableau pour un menu, un tableau c'est pour des données tabulaires justement.

En tout cas on voit bien que lorsqu'on déroule 1 des menus, les autres sont centrés en hauteur.
C'est le comportement par défaut d'un tableau.
C'est un signe qu'ils sont tous dans un seul bloc (le tableau) quand bien mêmes qu'il soient dans des cellules.
Il y aurait peut être une solution qui est de définir que tout soit en haut pas défaut (Css -> vertical-align: top).
Mais quand bien ça fonctionnerait, un tableau c'est pas zen.

Faudrait 4 éléments plus neutres vet indépendant comme des DIV, et peut être les rendre flottant les uns à coté des autre (CSS -> float :left).
Disons que le problème serait plus du coté CSS que JS à mon sens.
Enfin, c'est une idée.

VIRGINIE87 · 01/04/2011, 21h10

Concernant le positionnement des 4 menus j'ai rectifié comme je le souhaité.

http://lavalettevirginie.free.fr/Menu/test.php#

voici le 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
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
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Intégration exemple 1</title>
	   <style type="text/css">
		body{background:#bfbfbf;}
		#main{width:750px;height:502px;
		background:#7a501e;
		margin-left: auto; 
		margin-right: auto;
		margin-top: 80px;
		}
 
		#developpementweb{width:185px;height:164px;margin-left:5px;margin-top:5px;float:left;}
		#systemeexploitation{width:185px;height:164px;margin-left:0px;margin-top:5px;float:left;}
		#bureautique{width:185px;height:164px;margin-left:0px;margin-top:5px;float:left;}
		#ressource{width:185px;height:164px;margin-left:0px;margin-top:5px;float:left;}
 
		ul, li{margin:0; padding:0; list-style:none;}
 
 
		.menu_head{border:1px solid #998675;vertical-align: top;}
		.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;vertical-align: top;}
		.menu_body li{background:#493e3b;}
		.menu_body li.alt{background:#362f2d;}
		.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
		.menu_body li a:hover{padding:15px 10px; font-weight:bold;}
 
		.menu_head1{border:1px solid #998675;vertical-align: top;}
		.menu_body1 {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;vertical-align: top;}
		.menu_body1 li{background:#493e3b;}
		.menu_body1 li.alt{background:#362f2d;}
		.menu_body1 li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
		.menu_body1 li a:hover{padding:15px 10px; font-weight:bold;}
 
 
		.menu_head2{border:1px solid #998675;vertical-align: top;}
		.menu_body2 {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;vertical-align: top;}
		.menu_body2 li{background:#493e3b;}
		.menu_body2 li.alt{background:#362f2d;}
		.menu_body2 li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
		.menu_body2 li a:hover{padding:15px 10px; font-weight:bold;}
 
 
		.menu_head3{border:1px solid #998675;vertical-align: top;}
		.menu_body3 {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;vertical-align: top;}
		.menu_body3 li{background:#493e3b;}
		.menu_body3 li.alt{background:#362f2d;}
		.menu_body3 li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
		.menu_body3 li a:hover{padding:15px 10px; font-weight:bold;}
		</style>
 
		<script type="text/javascript" src="jsfiles/jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function () {
			$("ul.menu_body li:even").addClass("alt");
			$('img.menu_head').click(function () {
			$('ul.menu_body').slideToggle('medium');
			});
			$('ul.menu_body li a').mouseover(function () {
			$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
			});
			$('ul.menu_body li a').mouseout(function () {
			$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
			});
		});
 
		$(document).ready(function () {
			$("ul.menu_body1 li:even").addClass("alt");
			$('img.menu_head1').click(function () {
			$('ul.menu_body1').slideToggle('medium');
			});
			$('ul.menu_body1 li a').mouseover(function () {
			$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
			});
			$('ul.menu_body1 li a').mouseout(function () {
			$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
			});
		});
 
		$(document).ready(function () {
			$("ul.menu_body2 li:even").addClass("alt");
			$('img.menu_head2').click(function () {
			$('ul.menu_body2').slideToggle('medium');
			});
			$('ul.menu_body2 li a').mouseover(function () {
			$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
			});
			$('ul.menu_body2 li a').mouseout(function () {
			$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
			});
		});
 
		$(document).ready(function () {
			$("ul.menu_body3 li:even").addClass("alt");
			$('img.menu_head3').click(function () {
			$('ul.menu_body3').slideToggle('medium');
			});
			$('ul.menu_body3 li a').mouseover(function () {
			$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
			});
			$('ul.menu_body3 li a').mouseout(function () {
			$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
			});
		});
		</script>
   </head>
 
<body>
<div id="main">
 
 
				<div id="developpementweb"><img src="images/navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="../xhtml.php">XHTML</a></li>
							<li><a href="../html.php">HTML</a></li>
							<li><a href="../diff html xhtml.php">Difference XHTML-HTML</a></li>
							<li><a href="../html5.php">HTML 5</a></li>
							<li><a href="../css.php">CSS</a></li>
							<li><a href="../php.php">PHP</a></li>
							<li><a href="../css3.php">CSS3</a></li>
							<li><a href="../xml.php">XML</a></li>
							<li><a href="../referencement.php">Referencement</a></li>
							<li><a href="../ergonomie.php">Ergonomie</a></li>
							<li><a href="../w3c.php">W3C</a></li>
							<li><a href="../wordpress.php">Wordpress</a></li>
							<li><a href="../jquery.php">Jquery</a></li>
						</ul>
				</div>
 
				<div id="systemeexploitation"><img src="images/navigate.png" width="184" height="32" class="menu_head1" />
						<ul class="menu_body1">
						<li><a href="#">Windows XP</a></li>
						<li><a href="../windows7.php">Windows 7</a></li>
						<li><a href="../unix.php">Unix</li>
						<li><a href="#">Ubuntu</li>
						<li><a href="#">Mac</li>
						</ul>
				</div>
 
 
				<div id="bureautique"><img src="images/navigate.png" width="184" height="32" class="menu_head2" />
						<ul class="menu_body2">
						<li><a href="#">Word 2003</a></li>
						<li><a href="#">Excel 2003</a></li>
						<li><a href="#">PowerPoint 2003</li>
						<li><a href="#">Word 2007</a></li>
						<li><a href="#">Excel 2007</a></li>
						<li><a href="#">PowerPoint 2007</li>
						<li><a href="#">Word 2010</a></li>
						<li><a href="#">Excel 2010</a></li>
						<li><a href="#">PowerPoint 2010</li>
						</ul>
				</div>
 
				<div id="ressource"><img src="images/navigate.png" width="184" height="32" class="menu_head3" />
						<ul class="menu_body3">
						<li><a href="#">Templates CSS</a></li>
						<li><a href="#">Typographie</a></li>
						<li><a href="#">Fichiers PSD 2003</li>
						<li><a href="#">Icones</a></li>
						<li><a href="#">IconesFacebook</a></li>
						<li><a href="#">Icones Twitter</li>
						</ul>
				</div>
 
		</div>
 
 
</body>
</html>

ce que je souhaiterai est que les menus puissent se dérouler seulement si les autres menus ne sont pas déroulés.
Que me conseillez vous ?

merci

ABCIWEB · 04/04/2011, 01h18

Peut-être une piste ici .

31/03/2011, 15h44	#1
VIRGINIE87 Débutant Virginie Sans Emploi Inscription : avril 2006 Messages : 286 Détails du profil Informations personnelles : Nom : Virginie Âge : 33 Localisation : France Informations professionnelles : Activité : Sans Emploi Informations forums : Inscription : avril 2006 Messages : 286 Points : 38 Points : 38	tutoriel menu déroulant animé avec jquery bonjour, j'ai réalisé le tutoriel http://dmouronval.developpez.com/tut...ry/menu-anime/ Et maintenant j'essaie de l'adapter à ce que je souhaite. Je souhaite réaliser trois autres menus identiques disposés horizontalement, qui se déroulent seulement si les 3 autres menus ne sont pas déroulés. Ce que je souhaiterai obtenir : - centrer mon menu - quand je déroule un menu, les 3 autres menus ne doivent pas etre actif (c'est à dire ne pas descendrent ) -quand un menu est déroulé les 3 autres ne doivent pas être déroulés que me conseillez vous ? voici ce que j'obtient : http://lavalettevirginie.free.fr/Menu/example.html merci d'avance
	00

31/03/2011, 16h10	#2
RunCodePhp Expert Confirmé Inscription : janvier 2010 Messages : 2 709 Détails du profil Informations personnelles : Localisation : Réunion Informations forums : Inscription : janvier 2010 Messages : 2 709 Points : 3 279 Points : 3 279	Salut Le lien vers la le tutorial présente un problème. C'est ceci à mon sens : http://dmouronval.developpez.com/tut...ry/menu-anime/ Pour ton problème, je n'est pas de solution, je suis loin d'avoir tout parcouru, mais dès le début un truc me choc, c'est que les 4 blocs de menus ce trouvent dans des cellules d'un tableau. Ne serait ce que pour une question de sémantique, on n'utilise pas de tableau pour un menu, un tableau c'est pour des données tabulaires justement. En tout cas on voit bien que lorsqu'on déroule 1 des menus, les autres sont centrés en hauteur. C'est le comportement par défaut d'un tableau. C'est un signe qu'ils sont tous dans un seul bloc (le tableau) quand bien mêmes qu'il soient dans des cellules. Il y aurait peut être une solution qui est de définir que tout soit en haut pas défaut (Css -> vertical-align: top). Mais quand bien ça fonctionnerait, un tableau c'est pas zen. Faudrait 4 éléments plus neutres vet indépendant comme des DIV, et peut être les rendre flottant les uns à coté des autre (CSS -> float :left). Disons que le problème serait plus du coté CSS que JS à mon sens. Enfin, c'est une idée. __________________ Win XP \| WampServer 2.2d \| Apache 2.2.21 \| Php 5.3.10 \| MySQL 5.5.20 Si debugger, c'est supprimer des bugs, alors programmer ne peut être que les ajouter [Edsger Dijkstra]
	00

04/04/2011, 01h18	#4
ABCIWEB Membre Expert Inscription : septembre 2010 Messages : 1 242 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 1 242 Points : 1 564 Points : 1 564	Peut-être une piste ici . __________________ - Réalisations - Interface graphique : génération en javascript d'objets défilants, texte et/ou images, mode horizontal ou vertical.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email