Je n'arrive pas à faire fonctionner mon menu

**vocal94130** · 21/04/2010, 20h46

Bonjour,

Je n'arrive pas à faire fonctionner mon menu Jquery ! Voici l'architecture de mon site :

dossier "css" -> les Css
dossier "js" -> mes script .js
dossier "pages" -> mes pages Web je j'inclus dans index.php
dossier "images"
index.php -> le contenu général du site, le central se trouve dans le dossier pages

Voici le script JS de mon 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
 
$(document).ready(function()
{
	slide("#sliding-navigation", 25, 15, 150, .8);
});
 
function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
	// creates the target paths
	var list_elements = navigation_id + " li.sliding-element";
	var link_elements = list_elements + " a";
 
	// initiates the timer used for the sliding animation
	var timer = 0;
 
	// creates the slide animation for all list elements 
	$(list_elements).each(function(i)
	{
		// margin left = - ([width of element] + [total vertical padding of element])
		$(this).css("margin-left","-180px");
		// updates timer
		timer = (timer*multiplier + time);
		$(this).animate({ marginLeft: "0" }, timer);
		$(this).animate({ marginLeft: "15px" }, timer);
		$(this).animate({ marginLeft: "0" }, timer);
	});
 
	// creates the hover-slide effect for all link elements 		
	$(link_elements).each(function(i)
	{
		$(this).hover(
		function()
		{
			$(this).animate({ paddingLeft: pad_out }, 150);
		},		
		function()
		{
			$(this).animate({ paddingLeft: pad_in }, 150);
		});
	});
}

Le menu se trouve dans une page (menu.php) qui est dans le dossier "pages" ! Il doit donc apparaitre quand j'appelle la menu.php dans index.php ! Mais le menu ne marche pas !

Lorsque la page menu.php est dans le même dossier que index.php, le menu marche donc j'en ais conclu que le problème vient sur .js

Merci de votre aide !!

**danielhagnoul** · 22/04/2010, 01h01

Bonsoir.

Il m'est impossible de tester votre problème sans la totalité du code.

La seule chose que je puisse en dire c'est que l'écriture des fonctions each n'est pas canonique.

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
// creates the slide animation for all list elements 
$(list_elements).each(function(i, item){
	// margin left = - ([width of element] + [total vertical padding of element])
	$(item).css("margin-left","-180px");
 
	// updates timer
	timer = (timer*multiplier + time);
 
	$(item).animate({ marginLeft: "0" }, timer);
	$(item).animate({ marginLeft: "15px" }, timer);
	$(item).animate({ marginLeft: "0" }, timer);
});
 
// creates the hover-slide effect for all link elements 		
$(link_elements).each(function(i, item){
	$(item).hover(
		function()
		{
			$(this).animate({ paddingLeft: pad_out }, 150);
		},		
		function()
		{
			$(this).animate({ paddingLeft: pad_in }, 150);
		}
	);
});

**vocal94130** · 22/04/2010, 10h20

Merci de la réponse tout d'abord !

Voici mon code source -> index.php

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
 
<!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>Titre</title>
	<link rel="stylesheet" type="text/css" href="monCss.css"/>
 
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/sliding_effect.js"></script>
</head>
 
<body>
	<div id="body">
 
		<?php 
			$pageOK = array('Bienvenue' => 'pages/Bienvenue.php',
                			'Contact' => 'pages/Contact.php',
							'quiSuisJe' => 'pages/QuiSuisJe.php',
							'Exemples' => 'pages/Exemples.php',
							'Commander' => 'pages/Commander.php');
 
  			if ( (isset($_GET['page'])) && (isset($pageOK[$_GET['page']])) ) {
    				include($pageOK[$_GET['page']]);   // Nous appelons le contenu central de la page
 			 } else {
    				include('pages/Bienvenue.php');   // Page par défaut quant elle n'existe pas dans le tableau
  			}
		?>
 
	</div>
</body>
 
</html>

La page index appelle menu.php

Voici mon menu.php :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
  <div id="navigation-block">
            <ul id="sliding-navigation">
                <li class="sliding-element"><h3>Navigation Title</h3></li>
                <li class="sliding-element"><a href="#">Link 1</a></li>
                <li class="sliding-element"><a href="#">Link 2</a></li>
                <li class="sliding-element"><a href="#">Link 3</a></li>
                <li class="sliding-element"><a href="#">Link 4</a></li>
                <li class="sliding-element"><a href="#">Link 5</a></li>
            </ul>
</div>

Voici mon 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
63
64
65
66
67
68
69
 
h2 	
{ 
	color: #999;
	margin-bottom: 0; 
	margin-left:13px;
	background:url(../images/menu/navigation.jpg) no-repeat;
	height:40px;
}
 
h2 span
{
	display: none;
}
 
p	
{ 
	color: #ffff66; 
	margin-top: .5em;
	font-size: .75em;
	padding-left:15px;	
}
 
#navigation-block {
	position:relative;
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-size: 100%;
}
 
#hide {
	position:absolute;
	top:30px;
	left:-190px;
}
 
ul#sliding-navigation
{
	list-style: none;
	font-size: .75em;
	margin: 30px 0;
	padding: 0;
}
 
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
	display: block;
	width: 150px;
	padding: 5px 18px;
	margin: 0;
	margin-bottom: 5px;
}
 
ul#sliding-navigation li.sliding-element h3
{
	color: #fff;
	background:#333 url(../images/menu/heading_bg.jpg) repeat-y;
	font-weight: normal;
}
 
ul#sliding-navigation li.sliding-element a
{
	color: #999;
	background:#222 url(../images/menu/tab_bg.jpg) repeat-y;
	border: 1px solid #1a1a1a;
	text-decoration: none;
}
 
ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }

Et le sliding_effect.js c'est celui que j'ai mis au premier post !

Qu'est ce que tu entends par canonique, je n'y connais pas grand chose en JS !

**danielhagnoul** · 23/04/2010, 08h31

Bonjour.

Canonique : conforme aux règles, au modèle. Je parlais de l'écriture des fonctions each.

Code :

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

$(...).each(fonction (i, item) { ...}

Avez-vous testé les modifications proposées ?

Le code de test fonctionne. Le problème est peut-être du côté du PHP ?

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
		/* BASE */
		body {
			background-color:#ffffff;
			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;
		}
 
		/* TEST */
#navigation-block {
	position:relative;
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-size: 100%;
}
#hide {
	position:absolute;
	top:30px;
	left:-190px;
}
ul#sliding-navigation
{
	list-style: none;
	font-size: .75em;
	margin: 30px 0;
	padding: 0;
}
 
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
	display: block;
	width: 150px;
	padding: 5px 18px;
	margin: 0;
	margin-bottom: 5px;
}
ul#sliding-navigation li.sliding-element h3
{
	color: #fff;
	background:#333 url(../images/menu/heading_bg.jpg) repeat-y;
	font-weight: normal;
}
ul#sliding-navigation li.sliding-element a
{
	color: #999;
	background:#222 url(../images/menu/tab_bg.jpg) repeat-y;
	border: 1px solid #1a1a1a;
	text-decoration: none;
}
ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }	
	</style>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
	<script>
		function slide(navigation_id, pad_out, pad_in, time, multiplier){
			// creates the target paths
			var list_elements = navigation_id + " li.sliding-element";
			var link_elements = list_elements + " a";
 
			// initiates the timer used for the sliding animation
			var timer = 0;
 
			// creates the slide animation for all list elements 
			$(list_elements).each(function(i, item){
				// margin left = - ([width of element] + [total vertical padding of element])
				$(item).css("margin-left","-180px");
 
				// updates timer
				timer = (timer*multiplier + time);
 
				$(item).animate({ marginLeft: "0" }, timer);
				$(item).animate({ marginLeft: "15px" }, timer);
				$(item).animate({ marginLeft: "0" }, timer);
			});
 
			// creates the hover-slide effect for all link elements 		
			$(link_elements).each(function(i, item){
				$(item).hover(
					function()
					{
						$(this).animate({ paddingLeft: pad_out }, 150);
					},		
					function()
					{
						$(this).animate({ paddingLeft: pad_in }, 150);
					}
				);
			});
		}
 
		$(function(){
			slide("#sliding-navigation", 25, 15, 150, .8);
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<div id="navigation-block">
			<ul id="sliding-navigation">
				<li class="sliding-element"><h3>Navigation Title</h3></li>
				<li class="sliding-element"><a href="#">Link 1</a></li>
				<li class="sliding-element"><a href="#">Link 2</a></li>
				<li class="sliding-element"><a href="#">Link 3</a></li>
				<li class="sliding-element"><a href="#">Link 4</a></li>
				<li class="sliding-element"><a href="#">Link 5</a></li>
			</ul>
		</div>
 
	</div>
	<iframe src="http://www.developpez.com/ws/badge?user=285162" style="border:none;"></iframe>
</body>  
</html>

**vocal94130** · 24/04/2010, 10h05

Bon ça y est ça marche

Merci tout d'abord de votre aide !

Ce qui bloqué c'était un script que j'appelais dans index.php :

Code :

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

1
2
 
<script type="text/javascript" src="js/s3Slider2.js"></script>

Le s3Slider2.js contenait :

Code :

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

1
2
3
4
5
6
 
$(document).ready(function() {
			$('#slider1').s3Slider({
				timeOut: 4000 
			});
		});

Le s3Slider.js est le script mentionné depuis le début.
J'ai donc mis le contenu directement dans mon index.php !
Je ne suis pas une bête en JS mais d'après mes recherches cette fonction permet l'exécution d'une fonction spécifique après chargement du fichier !
Peut-on m'expliquer ce que fait exactement ce petit bouh de js?

**danielhagnoul** · 24/04/2010, 11h52

Bonjour.

C'est un plug-in que je ne connais pas. Documentation s3Slider.

**vocal94130** · 24/04/2010, 17h07

D'accord ! Merci

Je n'arrive pas à faire fonctionner mon menu

jQuery

Discussions similaires

Partager

Partager