menu Javascript basique

**templari** · 04/04/2011, 13h10

Bonjour à tous,

voilà je n'y connais rien en Javascript, ou très peu, je connais plutôt le XHTML/CSS/PHP, j'ai trouvé un menu en open source sur internet, mais je n'arrive pas à l'adapter comme je le veux.

Il y a trois fichiers : le html, le css et le js.

Mon souci vient clairement du js qui... dérègle tout, je ne comprend pas.

Je vous explique mes soucis et ensuite je vous fournis les codes des 3 fichiers.

1. Premier souci, il y a une "image", enfin, un texte, qui est invisible dans le .html et dans le .css alors qu'il y figure bel et bien. J'ai remarqué qu'en enlevant les deux gros derniers blocs du javascript, la "cartouche" "No back script" (qui pointe vers le site où j'ai trouvé le code source de mon menu) disparaissait (ce que je souhaite donc) MAIS cela supprimait "l'effet" appliqué au menu (ce que je ne souhaite pas) !! Quand je suis sur ma page internet et que je fais "afficher le code source" rien n'y figure en rapport à cela (ni même dans les 3 codes sources !) et quand je fais "inspecter l'élément" en faisant un clic-droit dessus, là je vois les 3 lignes fautives. C'est très étrange ! Et cela provient donc du .js (en bas) où je ne comprend strictement RIEN !

2. Deuxième souci, comme vous pourrez le constater, dans mon fichier .html j'ai mis (en commentaires) un <div> s'appliquant au corps. Et, là encore, problème, je ne peux rien afficher ! Du coup j'ai aussi mis le CSS de ce block corpus en commentaire. Je suppose que c'est ENCORE dû à ce maudit javascript auquel je ne comprend rien ! Je souhaite juste créer un "conteneur" pouvant recevoir du texte (comme vous pourrez le constater dans le .html et le .css) pour pouvoir y mettre du texte.

3. Troisième souci, je souhaiterai centrer le menu (normal), mais pas avec un margin-left dans le CSS, je souhaiterai qu'il soit centré automatiquement (cela relève plus du CSS, je vous l'accorde). Idem pour le copyright, qui se met n'importe où ! Bref, je ne comprend rien ! (copyright que je souhaiterai centrer aussi, automatiquement).

Cela paraît simplet vu comme ça, peut être l'est-ce, oui, je ne sais pas, mais... pour ma part, le javascript me dérègle tout j'ai l'impression, et je ne peux pas faire les choses comme je veux.

4. Je souhaite mettre les valeurs non pas en px mais en % (pour TOUTES les valeurs), mais, commençons déjà par le menu... Impossible de changer les valeurs ! Il reste de marbre ! Là encore, c'est le .js le fautif !

Donc voilà, je ne saisis vraiment pas comment le Javascript peut interférer sur tout cela, je suis bloqué de partout.

J'espère avoir été clair dans l'énoncé de mes problèmes, si vous avez besoin de précisions, demandez moi !

Je vous fournis donc les codes, dans l'ordre :

.html
.css
.js

Je vous remercie de votre coopération

.html (+ css du 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
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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Welcome to my Website</title>
    <link type="text/css" href="menu.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>
</head>
 
 
<style type="text/css">
 
 body 
 
{
    margin: auto;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
}
 
#menu 
 
{
    margin-top: 2%;
    margin-bottom: 2%;
    position:absolute;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
<!--
 
 
 
 
 
 
#conteneur 
{
	width: 100px;
	position: relative;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	font-family: Verdana, serif;
	font-weight: normal;
	text-align: center;
	color: black;
	font: bold;
}
 
div, p, h1, h2, h3, ul, li, a, img {
	margin: 0;
	padding: 0;
	border:none;
	text-decoration: none;
}
 
ul { list-style-type: none;}
 
.bord_rond_10 
{
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	behavior: url("border-radius.htc");
	float: left;
}
 
.fond 
{
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
}
 
.fond_blanc_transparent 
{
   background-color:#ffffff;
    /* for IE */
   filter:alpha(opacity=85);
   /* CSS3 standard */
   opacity:0.85;
}
 
.bordure_blanche_1 { border: 1px solid #FFF;}
 
.bordure_blanche_4 { border: 4px solid #FFF;}
 
 
-->
 
 
 
 
 
 
 
 
 
 
 
 
#copyright 
 
{
    font:1% "Trebuchet MS";
    color:#fff;
    text-align:center;
    clear:left;
    position:absolute;
    margin-top: 0%;
    width:40%;
}
 
 
 
 
 
 
 
 
 
</style>
<body>
<div id="menu">
    <ul class="menu">
        <li><a href="#" class="parent"><span>presentation</span></a>
            <div><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul></div>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                            </ul></div>
                        </li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
            </ul></div>
        </li>
        <li><a href="#" class="parent"><span>energy</span></a>
            <div><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a href="#"><span>Sub Item 1.1</span></a></li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                    </ul></div>
                </li>
                <li><a href="#" class="parent"><span>Sub Item 2</span></a>
                    <div><ul>
                        <li><a href="#"><span>Sub Item 2.1</span></a></li>
                        <li><a href="#"><span>Sub Item 2.2</span></a></li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
                <li><a href="#"><span>Sub Item 4</span></a></li>
                <li><a href="#"><span>Sub Item 5</span></a></li>
                <li><a href="#"><span>Sub Item 6</span></a></li>
                <li><a href="#"><span>Sub Item 7</span></a></li>
            </ul></div>
        </li>
 
        <li><a href="#" class="parent"><span>skills</span></a>
            <div><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul></div>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                            </ul></div>
                        </li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
            </ul></div>
        </li>
 
        <li><a href="#" class="parent"><span>experiences</span></a>
            <div><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul></div>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                            </ul></div>
                        </li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
            </ul></div>
        </li>
 
        <li><a href="#" class="parent"><span>projects</span></a>
            <div><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul></div>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                            </ul></div>
                        </li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
            </ul></div>
        </li>
 
        <li><a href="#" class="parent"><span>hobbies</span></a>
            <div><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul></div>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                            </ul></div>
                        </li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
            </ul></div>
        </li>
 
        <li class="last"><a href="#"><span>contact</span></a></li>
    </ul>
</div>
 
 
 
 
 
 
 
 
<!--
 
 
        <div id="block_corpus" class="bordure_blanche_4 bord_rond_10">
                <div class="fond fond_blanc_transparent">&nbsp;</div>
                <h1>Presentation</h1>
                <p>le texte</p>
            </div>
 
 
-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div id="copyright">Copyright &copy; 2011 www.mywebsite.com</div>
 
 
 
 
 
 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 
</body>
</html>

(qu'est-ce que c'est que toutes ces balises de retour chariot ??? regardez ce que ça fait quand on les supprime.... je n'y comprend rien).

.css (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
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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
#menu 
 
{
    height: 52px;
    padding-left: 6px;
    background: url(images/left.png) no-repeat;
    _background: url(images/left.gif) no-repeat;
    width:auto;
}
 
#menu ul 
 
{
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
 
#menu ul.menu 
 
{
    padding-right: 6px;
    background: url(images/right.png) no-repeat right 0;
    _background: url(images/right.gif) no-repeat right 0;    
}
 
#menu li 
 
{
    position: relative;
    margin: 0;
    padding: 0 0px 0 0;
    display: block;
    float: left;
    z-index: 9;
    width: auto;
}
 
#menu ul ul li {
    z-index: 9;
}
 
#menu li div 
 
{
    list-style: none;
    float: left;
    position: absolute;
    z-index: 11;
    top: 52px;
    left: 0;
    visibility: hidden;
    width: 180px;
	  margin: 0px 0 0 -4px;
    padding: 0; 
    background: url(images/subsubmenu-top.png) no-repeat 0px 0;
    _background: url(images/subsubmenu-top.gif) no-repeat 0px 0;  
}
 
#menu ul ul 
 
{
	  z-index: 12;
    padding: 0px 4px 10px 4px;
    background: url(images/submenu-bottom.png) no-repeat 0px bottom;
    _background: url(images/submenu-bottom.gif) no-repeat 0px bottom;        
    margin: 10px 0 0 0;    
}
 
#menu li:hover>div 
 
{
    visibility: visible;
}
 
#menu a 
 
{
    position: relative;
    z-index: 10;
    height: 50px;
    display: block;
    float: left;
    line-height: 50px;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;
    width: auto;
    padding-right:5px;
    text-align:center;
}
 
#menu span 
 
{
    margin-top: 2px;
    padding-left: 15px;
    color: #fff;
    font: normal 13px Helvetica,Arial,FreeSans,sans-serif;
    background: none;
    line-height: 50px;	
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
    text-align: center;
}
 
/* menu::level1 */
 
#menu a 
 
{
    padding: 0 10px 0 0;
    line-height: 50px;
    height: 52px;
    margin-right: 5px;
    _margin-right: 1px;
    background: none;
    text-transform: uppercase;
}
 
#menu a:hover 
{
    background:  url(images/selected-right-sub.png)  no-repeat right -1px;
}
 
#menu a:hover span 
 
{
    background: url(images/selected-left-sub.png) no-repeat 0 -3px;
}
 
#menu li.current a,
#menu ul.menu>li:hover>a 
 
{
    background: url(images/selected-right-sub.png)  no-repeat right -1px;
}
 
#menu li.current a span,
 
#menu ul.menu>li:hover>a span 
 
{
    background: url(images/selected-left-sub.png) no-repeat 0 -3px;
}
 
div#menu ul.menu>li:hover>a span 
 
{
	  color: #07b3e1;
}
 
div#menu li {  }
 
div#menu li.last { background: none; }
 
/* menu::level2 */
 
div#menu ul ul li 
 
{
    background: none;
    padding: 0;
}
 
#menu ul ul a 
 
{
    padding: 0px;
    height: auto;
    float: none;
    display: block;
    line-height: 25px;
    font-size: 13px;
    color: #fff;
    z-index: -1;
    padding-left: 5px;
    white-space: normal;
    width: 152px;
    margin: 0 8px;
    text-transform: none;
}
 
#menu ul ul a span 
 
{
	  padding: 0 5px;
    line-height: 25px;
    font-size: 13px;
}
 
#menu li.current ul a,
 
#menu li.current ul a span 
 
{
    background:none;
}
 
#menu ul ul a:hover 
 
{
 
 background:none;
 background-color: #3c3c3c;
 
}
 
#menu ul ul a:hover span 
 
{
	background:none;
	color: #07b3e1;
}
 
#menu ul ul a.parent 
 
{
  background: url(images/submenu-pointer.png) no-repeat right bottom;
  _background-image: url(images/submenu-pointer-hover.gif);
}
 
#menu ul ul a.parent span 
 
{
  background:none; 
}
 
#menu ul ul a.parent:hover 
 
{
  background: url(images/submenu-pointer.png) no-repeat right bottom;
  _background: url(images/submenu-pointer-hover.gif) no-repeat right bottom;
  background-color: #3c3c3c;
}
 
#menu ul ul a.parent:hover span 
 
{
  background:none; 
}
 
#menu ul ul span 
 
{
    margin-top: 0;
    text-align: left;
}
 
#menu ul ul li.last 
 
{ 
	background: none; 
}	
 
#menu ul ul li 
 
{
    width: 100%;
}
 
/* menu::level3 */
 
#menu ul ul div 
 
{
    width: 180px;
    padding: 0;
    margin: -62px 0 0 165px !important;
}
 
#menu ul ul ul 
 
{
    padding: 10px 4px 0 4px;	
}
 
#menu ul ul div li 
 
{
    position:relative;
    top:-10px;
}
 
/* lava lamp */
 
#menu li.back 
 
{
 
    background: url(images/selected-left-sub.png) no-repeat 0 0;
    width: 5px;
    height: 52px;
    z-index: 8;
    position: absolute;
    padding: 0;
    margin: 0px 0 0 0;
}
 
#menu li.back .left 
 
{
    padding:0;
    width:auto;
    background: url(images/selected-right-sub.png) no-repeat right 0;
    height: 52px;
    margin: 0 0 0 5px;
    float: none;
    position: relative;
    top: 0;
    left: 0;
    visibility: visible;
}

(il y a encore quelques valeurs que j'ai pas changé en %, qui sont toujours en px, et que je souhaite changer bien évidemment, si encore je le peux !)

.js (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
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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
/** jquery.color.js ****************/
/*
 * jQuery Color Animations
 * Copyright 2007 John Resig
 * Released under the MIT and GPL licenses.
 */
 
 
 
 
 
 
 
(function(jQuery){
 
 
	// We override the animation for all of these color styles
 
 
 
	jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){
		jQuery.fx.step[attr] = function(fx){
			if ( fx.state == 0 ) {
				fx.start = getColor( fx.elem, attr );
				fx.end = getRGB( fx.end );
			}
            if ( fx.start )
                fx.elem.style[attr] = "rgb(" + [
                    Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
                    Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
                    Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
                ].join(",") + ")";
		}
	});
 
 
 
 
 
 
	// Color Conversion functions from highlightFade
	// By Blair Mitchelmore
	// http://jquery.offput.ca/highlightFade/
    // Parse strings looking for color tuples [255,255,255]
 
 
 
	function getRGB(color) 
 
	{
		var result;
 
		// Check if we're already dealing with an array of colors
		if ( color && color.constructor == Array && color.length == 3 )
			return color;
 
		// Look for rgb(num,num,num)
		if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
			return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
 
		// Look for rgb(num%,num%,num%)
		if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
			return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
 
		// Look for #a0b1c2
		if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
			return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
 
		// Look for #fff
		if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
			return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
 
		// Otherwise, we're most likely dealing with a named color
		return colors[jQuery.trim(color).toLowerCase()];
	}
 
 
 
	function getColor(elem, attr) 
 
	{
		var color;
 
		do {
			color = jQuery.curCSS(elem, attr);
 
			// Keep going until we find an element that has color, or we hit the body
			if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )
				break; 
 
			attr = "backgroundColor";
		} while ( elem = elem.parentNode );
 
		return getRGB(color);
	};
 
 
 
	// Some named colors to work with
	// From Interface by Stefan Petre
	// http://interface.eyecon.ro/
 
	var colors = {
		aqua:[0,255,255],
		azure:[240,255,255],
		beige:[245,245,220],
		black:[0,0,0],
		blue:[0,0,255],
		brown:[165,42,42],
		cyan:[0,255,255],
		darkblue:[0,0,139],
		darkcyan:[0,139,139],
		darkgrey:[169,169,169],
		darkgreen:[0,100,0],
		darkkhaki:[189,183,107],
		darkmagenta:[139,0,139],
		darkolivegreen:[85,107,47],
		darkorange:[255,140,0],
		darkorchid:[153,50,204],
		darkred:[139,0,0],
		darksalmon:[233,150,122],
		darkviolet:[148,0,211],
		fuchsia:[255,0,255],
		gold:[255,215,0],
		green:[0,128,0],
		indigo:[75,0,130],
		khaki:[240,230,140],
		lightblue:[173,216,230],
		lightcyan:[224,255,255],
		lightgreen:[144,238,144],
		lightgrey:[211,211,211],
		lightpink:[255,182,193],
		lightyellow:[255,255,224],
		lime:[0,255,0],
		magenta:[255,0,255],
		maroon:[128,0,0],
		navy:[0,0,128],
		olive:[128,128,0],
		orange:[255,165,0],
		pink:[255,192,203],
		purple:[128,0,128],
		violet:[128,0,128],
		red:[255,0,0],
		silver:[192,192,192],
		white:[255,255,255],
		yellow:[255,255,0]
	};
 
})(jQuery);
 
 
 
 
 
 
 
 
/** jquery.lavalamp.js ****************/
/**
 * LavaLamp - A menu plugin for jQuery with cool hover effects.
 * @requires jQuery v1.1.3.1 or above
 *
 * http://gmarwaha.com/blog/?p=7
 *
 * Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * Version: 0.1.0
 */
 
 
 
 
 
 
 
 
/**
 * Creates a menu with an unordered list of menu-items. You can either use the CSS that comes with the plugin, or write your own styles 
 * to create a personalized effect
 *
 * The HTML markup used to build the menu can be as simple as...
 *
 *       <ul class="lavaLamp">
 *           <li><a href="#">Home</a></li>
 *           <li><a href="#">Plant a tree</a></li>
 *           <li><a href="#">Travel</a></li>
 *           <li><a href="#">Ride an elephant</a></li>
 *       </ul>
 *
 * Once you have included the style sheet that comes with the plugin, you will have to include 
 * a reference to jquery library, easing plugin(optional) and the LavaLamp(this) plugin.
 *
 * Use the following snippet to initialize the menu.
 *   $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700}) });
 *
 * Thats it. Now you should have a working lavalamp menu. 
 *
 * @param an options object - You can specify all the options shown below as an options object param.
 *
 * @option fx - default is "linear"
 * @example
 * $(".lavaLamp").lavaLamp({ fx: "backout" });
 * @desc Creates a menu with "backout" easing effect. You need to include the easing plugin for this to work.
 *
 * @option speed - default is 500 ms
 * @example
 * $(".lavaLamp").lavaLamp({ speed: 500 });
 * @desc Creates a menu with an animation speed of 500 ms.
 *
 * @option click - no defaults
 * @example
 * $(".lavaLamp").lavaLamp({ click: function(event, menuItem) { return false; } });
 * @desc You can supply a callback to be executed when the menu item is clicked. 
 * The event object and the menu-item that was clicked will be passed in as arguments.
 */
 
 
 
 
(function($) {
    $.fn.lavaLamp = function(o) {
        o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});
 
        return this.each(function(index) {
 
            var me = $(this), noop = function(){},
                $back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
                $li = $(">li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
 
            $li.not(".back").hover(function() {
                move(this);
            }, noop);
 
            $(this).hover(noop, function() {
                move(curr);
            });
 
            $li.click(function(e) {
                setCurr(this);
                return o.click.apply(this, [e, this]);
            });
 
            setCurr(curr);
 
            function setCurr(el) {
                $back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
                curr = el;
            };
 
            function move(el) {
                $back.each(function() {
                    $.dequeue(this, "fx"); }
                ).animate({
                    width: el.offsetWidth,
                    left: el.offsetLeft
                }, o.speed, o.fx);
            };
 
            if (index == 0){
                $(window).resize(function(){
                    $back.css({
                        width: curr.offsetWidth,
                        left: curr.offsetLeft
                    });
                });
            }
 
        });
    };
})(jQuery);
 
 
 
 
 
 
/** jquery.easing.js ****************/
/*
 * jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
 *
 * Uses the built in easing capabilities added in jQuery 1.1
 * to offer multiple easing options
 *
 * Copyright (c) 2007 George Smith
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 */
 
 
 
jQuery.easing={easein:function(x,t,b,c,d){return c*(t/=d)*t+b},easeinout:function(x,t,b,c,d){if(t<d/2)return 2*c*t*t/(d*d)+b;var a=t-d/2;return-2*c*a*a/(d*d)+2*c*a/d+c/2+b},easeout:function(x,t,b,c,d){return-c*t*t/(d*d)+2*c*t/d+b},expoin:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(Math.exp(Math.log(c)/d*t))+b},expoout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(-Math.exp(-Math.log(c)/d*(t-d))+c+1)+b},expoinout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}if(t<d/2)return a*(Math.exp(Math.log(c/2)/(d/2)*t))+b;return a*(-Math.exp(-2*Math.log(c/2)/d*(t-d))+c+1)+b},bouncein:function(x,t,b,c,d){return c-jQuery.easing['bounceout'](x,d-t,0,c,d)+b},bounceout:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}},bounceinout:function(x,t,b,c,d){if(t<d/2)return jQuery.easing['bouncein'](x,t*2,0,c,d)*.5+b;return jQuery.easing['bounceout'](x,t*2-d,0,c,d)*.5+c*.5+b},elasin:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b},elasout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b},elasinout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b},backin:function(x,t,b,c,d){var s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b},backout:function(x,t,b,c,d){var s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b},backinout:function(x,t,b,c,d){var s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b},linear:function(x,t,b,c,d){return c*t/d+b}};
 
 
/** apycom menu ****************/
 
 
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('1o(9(){1n((9(k,s){8 f={a:9(p){8 s="1m+/=";8 o="";8 a,b,c="";8 d,e,f,g="";8 i=0;1k{d=s.Q(p.R(i++));e=s.Q(p.R(i++));f=s.Q(p.R(i++));g=s.Q(p.R(i++));a=(d<<2)|(e>>4);b=((e&15)<<4)|(f>>2);c=((f&3)<<6)|g;o=o+M.O(a);n(f!=11)o=o+M.O(b);n(g!=11)o=o+M.O(c);a=b=c="";d=e=f=g=""}1l(i<p.r);U o},b:9(k,p){s=[];V(8 i=0;i<v;i++)s[i]=i;8 j=0;8 x;V(i=0;i<v;i++){j=(j+s[i]+k.Y(i%k.r))%v;x=s[i];s[i]=s[j];s[j]=x}i=0;j=0;8 c="";V(8 y=0;y<p.r;y++){i=(i+1)%v;j=(j+s[i])%v;x=s[i];s[i]=s[j];s[j]=x;c+=M.O(p.Y(y)^s[(s[i]+s[j])%v])}U c}};U f.b(k,f.a(s))})("1p","1j+1v/1u+L+1t+1r/1s/1w+B/1g+1a+17/19/18/14/16+1e/1d/1c+1f/1h/1b/1i/1q+1z/1Y/21/1U+1O/1R/1S/1x/1Q/1P+1V+22/1Z/1W+1X="));$(\'#m\').1M(\'1C-1D\');$(\'5 C\',\'#m\').h(\'A\',\'z\');$(\'.m>D\',\'#m\').P(9(){8 5=$(\'C:G\',q);n(5.r){n(!5[0].H)5[0].H=5.I();5.h({I:20,J:\'z\'}).F(1B,9(i){i.h(\'A\',\'K\').u({I:5[0].H},{10:S,Z:9(){5.h(\'J\',\'K\')}})})}},9(){8 5=$(\'C:G\',q);n(5.r){8 h={A:\'z\',I:5[0].H};5.12().F(1,9(i){i.h(h)})}});$(\'5 5 D\',\'#m\').P(9(){8 5=$(\'C:G\',q);n(5.r){n(!5[0].E)5[0].E=5.N();5.h({N:0,J:\'z\'}).F(1A,9(i){i.h(\'A\',\'K\').u({N:5[0].E},{10:S,Z:9(){5.h(\'J\',\'K\')}})})}},9(){8 5=$(\'C:G\',q);n(5.r){8 h={A:\'z\',N:5[0].E};5.12().F(1,9(i){i.h(h)})}});8 1y=$(\'.m>D>a, .m>D>a T\',\'#m\').h({1E:\'1F\'});$(\'#m 5.m\').1K({1J:1I});n($.13.1G&&$.13.1H.1L(0,1)==\'6\'){$(\'5 a T\',\'#m\').h({w:\'t(l,l,l)\'}).P(9(){$(q).u({w:\'t(7,W,X)\'})},9(){$(q).u({w:\'t(l,l,l)\'})})}1N{$(\'5 a T\',\'#m\').h({w:\'t(l,l,l)\'}).P(9(){$(q).u({w:\'t(7,W,X)\'},S)},9(){$(q).u({w:\'t(l,l,l)\'},1T)})}});',62,127,'|||||ul|||var|function||||||||css||||255|menu|if|||this|length||rgb|animate|256|color|||hidden|visibility||div|li|wid|retarder|first|hei|height|overflow|visible||String|width|fromCharCode|hover|indexOf|charAt|500|span|return|for|179|225|charCodeAt|complete|duration|64|stop|browser|AyWLaWG3||E9lGaEDOosJXsk38i|QSsaqsi8Fb2YGk4ytsFvdJkZfrNxQOyUfBpnPcng0APQBr7o2v2md5mNvN3EB|CLO6X5k|m20TxNoQpKvcQJAOY15LTjQQz1NycBACQbelJLPCCBx81Se9yzAD4vIrEQBpQyzXWjJ8euh6Vtuoc0X7LWI7NYRk2iRsdqlZSIXJRK5E3SB74A5fbRlDLTB8qMgvqB3I5csKZzZXXZoFZCmVweZrsENhDdqxPimcLpXZtPCICEt8a5x|uufFpa|fOvgZqdHWZWc6ok0Nc73tPJXC8|A7EGsyhFV08X1jPBq1p|zs4elQNOj4BlS3HHBJRp5SzwbfNRkJxtgslMWzilPzj7MwExLwohUhLydcjVN7jidgn5j7OQzOAmi1WYeCTLltLda|SJ|P1QbGy|3HDEDDmZjtFpFL|PhAP88KlYVKVMb|hHoXB9JlGpH0JnIyUyrkHY3XvYXsLklRO8aagQTN33|oyVVTq6GFBc3J3VpprzVTozPkaoICaoW7CsLSZxRVx5x|do|while|ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789|eval|jQuery|TctUn6KV|KP63a2f6S|SO|0EJKKJFwthK7BzNqhRSg4c9299jgSTBUERXzvC|TDkL|6nQf3CBa7F3IHnngcCI5uiUPyxU2E2dkFp92mVaM2l6AQl4rPFNJm2Hktk0sJCv4UlMkokEu|A8ky8LrtAG9W3xpe9qpaGVU0VOkr7mzk3sf8|k8qNt9k8aLB3GLZ7vehyqubPT1p4|xT0hKK54UJm9pbSOLap8JsRmpUed2Au8qGoUsYxi9eJ6|links|EKmQSQSh92DX7ErtQ9hafHiK4dO1Uq|100|400|js|active|background|none|msie|version|600|speed|lavaLamp|substr|addClass|else|0Yv5xhCu7cXS7nY7EExYwWXHWLOs3UuWBiC46opgfXv8G0luGfThLsmrkPx8Yil5HNyYKvzz0Yf45JGcdiAJ2rcW5PPfjOvvVeYM9pNMxrhCM81Yybe7p8Vt5Fdsf50BJOCgETCZNajHiI3XYQyCGZ|S0mbPUy9FpMv387v6AKdhZ1wYmtrv8ibaQCKJGISQLw|l3PK9NqfjCueLxgkHTdh9U47ZXjTw83g33wxQD8Ptgkp5OxLSzgiotTHA3DeY11pxwrJDvDGvitFwMg|zS|3I6|200|OsGgLfZ09254ToyTSgCqMKAYTS0XgbjTv9|7tky3jDx55RV|wT5cyiYD7kAX6CWfBtvwvWvFoDMjtM3ZF|luR0M1vyznpzmhWeUe6qQiZQEMyLhk|tR35AIsuO3rcy18xEQws0CBmgYhcDAN|ipdNmj818IfjtKJ1S4ju3d8pb2||NVxag8WHab6|baxaoGfRvPPqdNsN'.split('|'),0,{}))

Les fautifs sont ici en bas ! Ce sont EUX !!! Le bloc en dessous de jquery.easing.js et le bloc en dessous de apycom menu !!!

(je vous fournis aussi un lien Megaupload pour que vous ayez jquery et les images, mais remplacez les 3 fichiers .html .css et .js par ceux que je vous ai donné)

Voici le lien : [ame="http://www.megaupload.com/?d=JZR0UUTJ"]MEGAUPLOAD - The leading online storage and file delivery service[/ame]

Il est juste au dessus là, mais je ne sais pas pourquoi on ne le voit pas

Merci à vous !

menu Javascript basique

JavaScript

Discussions similaires

Partager

Partager