Fx.Slide Mootools sur plusieurs DIV [Résolu]

Heilong · 16/09/2008, 10h52

Bonjour à tous,

Voici pour commencer le bout de code que j'ai fais à l'aide de la librairie mootools :
JS:

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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
 
window.addEvent('domready', function() {
 
	var myMenu1 = new Fx.Slide('smenu1');
	var myMenu2 = new Fx.Slide('smenu2');
	var myMenu3 = new Fx.Slide('smenu3');
	var myMenu4 = new Fx.Slide('smenu4');
 
	var ActiveMenu = "menu1";
 
	$('menu1').addEvent('mouseover', function(e){
		e.stop();
		myMenu1.slideIn();
		myMenu2.slideOut();
		myMenu3.slideOut();
		myMenu4.slideOut();
	});
 
	$('menu2').addEvent('mouseover', function(e){
		e.stop();
		myMenu1.slideOut();
		myMenu2.slideIn();
		myMenu3.slideOut();
		myMenu4.slideOut();
	});
 
	$('menu3').addEvent('mouseover', function(e){
		e.stop();
		myMenu1.slideOut();
		myMenu2.slideOut();
		myMenu3.slideIn();
		myMenu4.slideOut();
	});
 
	$('menu4').addEvent('mouseover', function(e){
		e.stop();
		myMenu1.slideOut();
		myMenu2.slideOut();
		myMenu3.slideOut();
		myMenu4.slideIn();
	});
 
	//Gestion du menu actif
	$('menu1').addEvent('click', function(e){
		e.stop();
		ActiveMenu = "menu1";
	});
 
 
	$('menu2').addEvent('click', function(e){
		e.stop();
		ActiveMenu = "menu2";
	});
 
	$('menu3').addEvent('click', function(e){
		e.stop();
		ActiveMenu = "menu3";
	});
 
	$('menu4').addEvent('click', function(e){
		e.stop();
		ActiveMenu = "menu4";
	});
 
	//Gestion de l'affichage du menu actif
	$('smenu1').addEvent('mouseout', function(e){
		e.stop();
		switch(ActiveMenu)
		{
			case "menu1":
				myMenu1.slideIn();
				myMenu2.slideOut();
				myMenu3.slideOut();
				myMenu4.slideOut();
				break;
 
			case "menu2":
				myMenu1.slideOut();
				myMenu2.slideIn();
				myMenu3.slideOut();
				myMenu4.slideOut();
				break;
 
			case "menu3":
				myMenu1.slideOut();
				myMenu2.slideOut();
				myMenu3.slideIn();
				myMenu4.slideOut();
				break;
 
			case "menu4":
				myMenu1.slideOut();
				myMenu2.slideOut();
				myMenu3.slideOut();
				myMenu4.slideIn();
				break;
		}
 
	});
 
	$('smenu2').addEvent('mouseout', function(e){
		e.stop();
		switch(ActiveMenu)
		{
			case "menu1":
				myMenu1.slideIn();
				myMenu2.slideOut();
				myMenu3.slideOut();
				myMenu4.slideOut();
				break;
 
			case "menu2":
				myMenu1.slideOut();
				myMenu2.slideIn();
				myMenu3.slideOut();
				myMenu4.slideOut();
				break;
 
			case "menu3":
				myMenu1.slideOut();
				myMenu2.slideOut();
				myMenu3.slideIn();
				myMenu4.slideOut();
				break;
 
			case "menu4":
				myMenu1.slideOut();
				myMenu2.slideOut();
				myMenu3.slideOut();
				myMenu4.slideIn();
				break;
		}
 
	});
	$('smenu3').addEvent('mouseout', function(e){
		e.stop();
		switch(ActiveMenu)
		{
			case "menu1":
				myMenu1.slideIn();
				myMenu2.slideOut();
				myMenu3.slideOut();
				myMenu4.slideOut();
				break;
 
			case "menu2":
				myMenu1.slideOut();
				myMenu2.slideIn();
				myMenu3.slideOut();
				myMenu4.slideOut();
				break;
 
			case "menu3":
				myMenu1.slideOut();
				myMenu2.slideOut();
				myMenu3.slideIn();
				myMenu4.slideOut();
				break;
 
			case "menu4":
				myMenu1.slideOut();
				myMenu2.slideOut();
				myMenu3.slideOut();
				myMenu4.slideIn();
				break;
		}
 
	});
 
	$('smenu4').addEvent('mouseout', function(e){
		e.stop();
		switch(ActiveMenu)
		{
			case "menu1":
				myMenu1.slideIn();
				myMenu2.slideOut();
				myMenu3.slideOut();
				myMenu4.slideOut();
				break;
 
			case "menu2":
				myMenu1.slideOut();
				myMenu2.slideIn();
				myMenu3.slideOut();
				myMenu4.slideOut();
				break;
 
			case "menu3":
				myMenu1.slideOut();
				myMenu2.slideOut();
				myMenu3.slideIn();
				myMenu4.slideOut();
				break;
 
			case "menu4":
				myMenu1.slideOut();
				myMenu2.slideOut();
				myMenu3.slideOut();
				myMenu4.slideIn();
				break;
		}
 
	});
 
 
});

le code CSS :

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
 
#smenu1
{
	background: transparent url('img/bg_menu.jpg') repeat-x scroll 0%;
	font-weight: bold;
	height:43px;
	margin-top:10px;
}
 
 
#smenu2
{
	background: transparent url('img/bg_menu.jpg') repeat-x scroll 0%;
	font-weight: bold;
	height:43px;
}
 
 
#smenu3
{
	background: transparent url('img/bg_menu.jpg') repeat-x scroll 0%;
	font-weight: bold;
	height:43px;
}
 
#smenu4
{
	background: transparent url('img/bg_menu.jpg') repeat-x scroll 0%;
	font-weight: bold;
	height:43px;
}
 
#Menu a
{
	color:#FFFFFF;
	font-size:13px;
	font-weight:bold;
	margin:0pt 28px;
	text-decoration:none;
}
 
#MenuLiens
{
	padding-top:15px;
}
 
#Menu
{
	height:43px;
	width:900px;
	margin:auto;
	text-align:right;
	background: transparent url('img/bg_menu.jpg') repeat-x scroll 0%;
	font-family:Arial, Verdana, Helvetica, sans-serif;
	border:1px #FFFFFF solid;
}
 
#Menu a:hover
{
	color:#3AAEEE;
	text-decoration:none;	
}

le code HTML :

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
 
<div id="Menu">
 
	<div id="MenuLiens">
		<a id="menu1" href="#">HOME</a>
		<a id="menu2" href="#">FEATURES</a>
		<a id="menu3" href="#">BUY</a>
		<a id="menu4" href="#">SUPPORT</a>
	</div>
 
	<div id="smenu1">
		<a href="#">SS Menu 1.1</a>
		<a href="#">SS Menu 1.2</a>
		<a href="#">SS Menu 1.3</a>
		<a href="#">SS Menu 1.4</a>
	</div>
 
	<div id="smenu2">
		<a href="#">SS Menu 2.1</a>
		<a href="#">SS Menu 2.2</a>
		<a href="#">SS Menu 2.3</a>
		<a href="#">SS Menu 2.4</a>
	</div>
 
	<div id="smenu3">
		<a href="#">SS Menu 3.1</a>
		<a href="#">SS Menu 3.2</a>
		<a href="#">SS Menu 3.3</a>
		<a href="#">SS Menu 3.4</a>		
	</div>
 
	<div id="smenu4">
		<a href="#">SS Menu 4.1</a>
		<a href="#">SS Menu 4.2</a>
		<a href="#">SS Menu 4.3</a>
		<a href="#">SS Menu 4.4</a>
	</div>
 
</div>

Il s'agit ici de l'affichage d'un menu et de sous menu en mode horizontal, ou plutôt de liens et de la DIV qui correspond avec d'autres liens formant les sous menu.

Mon souci est que lorsque la page se charge toutes les DIV apparaissent, une action de l'utilisateur fera que les DIV s'enroulent ou se déroulent.

J'aimerais qu'au chargement du script une seule DIV apparaisse, une DIV par défaut si on veut.

J'ai rajouté un évènement onload mais ça n'a pas fonctionné toutes les DIV se réafficher au chargement.

Une idée ?

Merci

Rumores · 06/10/2008, 21h19

Bonjour/soir Heilong,

Si ton problème n'est pas résolu, et si je l'ai bien compris, tu peux éventuellement essayer cette méthode qui définira ici les menus 2, 3 et 4 comme étant initialement masqués :

Code :

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

1
2
3
4
5
6
7
8
window.addEvent('domready', function() {
 
	var myMenu1 = new Fx.Slide('smenu1');
	var myMenu2 = new Fx.Slide('smenu2').hide();
	var myMenu3 = new Fx.Slide('smenu3').hide();
	var myMenu4 = new Fx.Slide('smenu4').hide();
 
// (+) Suite de ton code

Tu pourras également trouver à ce propos plus d'infos sur la doc MooTools » classe fx.Slide (http://mootools.net/docs/Plugins/Fx.Slide), nottament dans le premier exemple de cette page.

Bonne continuation ;)

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