menu retour indésirable en haut de page [Résolu]

alen22 · 10/04/2011, 00h48

salut,

j'ai un menu animé avec jqury

qui a ce code
pour 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
<style type='text/css'>
 
 
body{background:#586889;font-family:Arial, Helvetica, sans-serif; font-size:12px;}
ul, li{margin:0; padding:0; list-style:none;}
 
.menu_head{border:1px solid #998675;}
.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675; }
.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;}
.menu_body1 {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.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;}
.menu_body2 {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.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;}
.menu_body3 {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.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>

pour javascript

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
<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 );
    });
});
</script>
 
<script type="text/javascript">
$(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 );
    });
});
</script>
 
<script type="text/javascript">
$(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 );
    });
});
</script>
 
<script type="text/javascript">
$(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>

pour 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
<div class="container">
<table>
<tr>
<td>
<img src="navigate.png" width="184" height="32" class="menu_head" />
<ul class="menu_body">
<li><a href="http://www.google.tn">XHTML</a></li>
<li><a href="./Acceuil.html">HTML</a></li>
 
<li><a href="./test.html">Difference XHTML-HTML</a></li>
<li><a href="./test2.html">HTML 5</a></li>
 
 
</ul>
</td>
 
<td>
<img src="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>
 
</ul>
</td>
 
<td>
<img src="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>
 
</ul>
</td>
 
<td>
<img src="navigate.png" width="184" height="32" class="menu_head3" />
<ul class="menu_body3">
 
 
<li><a href="#">Fichiers PSD 2003</li>
<li><a href="#">Icones</a></li>
<li><a href="#">Icones Facebook</a></li>
<li><a href="#">Icones Twitter</li>
</ul>
</td>
</tr>
 
 
 
</table>

après l'exécution de ce code est quand je clique sur l'un de quatre navigate

la page se déplace vers le bas

je veux juste quand je clique dans navigate la page reste fixe (bien sur il m'affiche les lien relative a cet navigate )

merci d'avance

danielhagnoul · 10/04/2011, 11h53

Bonjour

Il y avait plusieurs "faiblesses" dans vos codes :

Une cellule de tableau s'agrandit en plaçant, par défaut, son contenu au centre (vertical-align), le comportement de votre menu était donc normal.
Un tableau doit avoir un tag <tbody>.
Un lien s'ouvre par le tag <a> et se ferme par un tag </a>.
jQuery permet de simplifier et de généraliser, encore faut-il l'utiliser correctement.

Bref, rien de dramatique, mais il y avait du travail.

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		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; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        /*ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }*/
        /*li {padding-bottom:6px; }*/
		.conteneur { width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* TEST */
		ul,ol,dl {list-style:none; }
		.menu {vertical-align:text-top; }
		.menu_head{border:1px solid #998675; }
		.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675; }
		.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;}*/ /* Non, uniquement dans le hover() jQuery */
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<table>
			<tbody>
				<tr>
					<td class="menu">
						<img src="navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="http://www.google.tn">XHTML</a></li>
							<li><a href="./Acceuil.html">HTML</a></li>
							<li><a href="./test.html">Difference XHTML-HTML</a></li>
							<li><a href="./test2.html">HTML 5</a></li>
						</ul>
					</td>
					<td class="menu">
						<img src="navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="#">Windows XP</a></li>
							<li><a href="../windows7.php">Windows 7</a></li>
							<li><a href="../unix.php">Unix</a></li> <!-- ajout de </a> -->
						</ul>
					</td>
					<td class="menu">
						<img src="navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="#">Word 2003</a></li>
							<li><a href="#">Excel 2003</a></li>
							<li><a href="#">PowerPoint 2003</a></li> <!-- ajout de </a> -->
						</ul>
					</td>
					<td class="menu">
						<img src="navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="#">Fichiers PSD 2003</a></li> <!-- ajout de </a> -->
							<li><a href="#">Icones</a></li>
							<li><a href="#">Icones Facebook</a></li>
							<li><a href="#">Icones Twitter</a></li> <!-- ajout de </a> -->
						</ul>
					</td>
				</tr>
			</tbody>
		</table>
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script>
		$(function(){
 
			$("ul.menu_body li:even").addClass("alt");
 
			$("img.menu_head").click(function(){
				/*
				 * On doit fermer les menus que l'utilisateur
				 * aurait laissés ouverts.
				 */
 
				// ul.menu_body en cours de traitement
				var self = $(this).next();
 
				// fermer tous les autres ul.menu_body
				$("ul.menu_body").each(function(i, item){
					if (item != self[0]){
						$(item).slideUp("medium");
					}
				});
 
				// agir sur le ul.menu_body en cours de traitement
				self.slideToggle("medium");
			});
 
			/*
			 * Les modifications de style et de taille doivent
			 * se faire ici, exclusivement.
			 */
			$("ul.menu_body li a").hover(
				function(){
					$(this).css("font-weight","bold").animate({ paddingLeft: "20px" }, 50 );
				},
				function(){
					$(this).css("font-weight","normal").animate({ paddingLeft: "10px" }, 50 );
				}
			);
 
		});
	</script>
</body>  
</html>

alen22 · 10/04/2011, 12h10

merci pour votre réponse, c'est exactement que je veux

alen22 · 20/04/2011, 19h05

votre code est très intéressent.

mais juste j'ai un problème

si je met dans <body> après le menu un champ text

Code :

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

<input type="text" value="salut" name="valeur"/>

ou n'importe autre balise

Code :

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

<h2>suite de code de la page jsp</h2>

a chaque clique dans le menu le champs text et le message de h2 se déplacent vers le bas

mais est ce que possible de rendre le champs text ou d'autre balise (après le menu) fixe

dans si je clique dans le menu il m'affiche les liens correspond au menu sans avoir un effet sur le champs text et le message de <h2> qui suit le 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
 
 
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		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; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        /*ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }*/
        /*li {padding-bottom:6px; }*/
		.conteneur { width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* TEST */
		ul,ol,dl {list-style:none; }
		.menu {vertical-align:text-top; }
		.menu_head{border:1px solid #998675; }
		.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675; }
		.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;}*/ /* Non, uniquement dans le hover() jQuery */
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<table>
			<tbody>
				<tr>
					<td class="menu">
						<img src="navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="http://www.google.tn">XHTML</a></li>
							<li><a href="./Acceuil.html">HTML</a></li>
							<li><a href="./test.html">Difference XHTML-HTML</a></li>
							<li><a href="./test2.html">HTML 5</a></li>
						</ul>
					</td>
					<td class="menu">
						<img src="navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="#">Windows XP</a></li>
							<li><a href="../windows7.php">Windows 7</a></li>
							<li><a href="../unix.php">Unix</a></li> <!-- ajout de </a> -->
						</ul>
					</td>
					<td class="menu">
						<img src="navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="#">Word 2003</a></li>
							<li><a href="#">Excel 2003</a></li>
							<li><a href="#">PowerPoint 2003</a></li> <!-- ajout de </a> -->
						</ul>
					</td>
					<td class="menu">
						<img src="navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="#">Fichiers PSD 2003</a></li> <!-- ajout de </a> -->
							<li><a href="#">Icones</a></li>
							<li><a href="#">Icones Facebook</a></li>
							<li><a href="#">Icones Twitter</a></li> <!-- ajout de </a> -->
						</ul>
					</td>
				</tr>
			</tbody>
		</table>
	</section>
<input type="text" value="salut" name="valeur"/>
<h2>suite de code de la page jsp</h2>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script>
		$(function(){
 
			$("ul.menu_body li:even").addClass("alt");
 
			$("img.menu_head").click(function(){
				/*
				 * On doit fermer les menus que l'utilisateur
				 * aurait laissés ouverts.
				 */
 
				// ul.menu_body en cours de traitement
				var self = $(this).next();
 
				// fermer tous les autres ul.menu_body
				$("ul.menu_body").each(function(i, item){
					if (item != self[0]){
						$(item).slideUp("medium");
					}
				});
 
				// agir sur le ul.menu_body en cours de traitement
				self.slideToggle("medium");
			});
 
			/*
			 * Les modifications de style et de taille doivent
			 * se faire ici, exclusivement.
			 */
			$("ul.menu_body li a").hover(
				function(){
					$(this).css("font-weight","bold").animate({ paddingLeft: "20px" }, 50 );
				},
				function(){
					$(this).css("font-weight","normal").animate({ paddingLeft: "10px" }, 50 );
				}
			);
 
		});
	</script>
</body>  
</html>

merci d'avance

SpaceFrog · 20/04/2011, 21h12

il manque juste le return false pour inhiber le href ...

Code :

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

1
2
3
$("ul.menu_body li a").click(function(){
.../...
return false;});

alen22 · 21/04/2011, 20h16

merci pour la réponse

mais si possible vous pouvez précisez la modification exacte de votre code et l'emplacement par rapport à mon code

je pense que le nouveau code doit être :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		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; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        /*ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }*/
        /*li {padding-bottom:6px; }*/
		.conteneur { width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* TEST */
		ul,ol,dl {list-style:none; }
		.menu {vertical-align:text-top; }
		.menu_head{border:1px solid #998675; }
		.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675; }
		.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;}*/ /* Non, uniquement dans le hover() jQuery */
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<table>
			<tbody>
				<tr>
					<td class="menu">
						<img src="navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="http://www.google.tn">XHTML</a></li>
							<li><a href="./Acceuil.html">HTML</a></li>
							<li><a href="./test.html">Difference XHTML-HTML</a></li>
							<li><a href="./test2.html">HTML 5</a></li>
						</ul>
					</td>
					<td class="menu">
						<img src="navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="#">Windows XP</a></li>
							<li><a href="../windows7.php">Windows 7</a></li>
							<li><a href="../unix.php">Unix</a></li> <!-- ajout de </a> -->
						</ul>
					</td>
					<td class="menu">
						<img src="navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="#">Word 2003</a></li>
							<li><a href="#">Excel 2003</a></li>
							<li><a href="#">PowerPoint 2003</a></li> <!-- ajout de </a> -->
						</ul>
					</td>
					<td class="menu">
						<img src="navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="#">Fichiers PSD 2003</a></li> <!-- ajout de </a> -->
							<li><a href="#">Icones</a></li>
							<li><a href="#">Icones Facebook</a></li>
							<li><a href="#">Icones Twitter</a></li> <!-- ajout de </a> -->
						</ul>
					</td>
				</tr>
			</tbody>
		</table>
	</section>
 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script>
		$(function(){
 
			$("ul.menu_body li:even").addClass("alt");
 
			$("img.menu_head").click(function(){
				/*
				 * On doit fermer les menus que l'utilisateur
				 * aurait laissés ouverts.
				 */
 
				// ul.menu_body en cours de traitement
				var self = $(this).next();
 
				// fermer tous les autres ul.menu_body
				$("ul.menu_body").each(function(i, item){
					if (item != self[0]){
						$(item).slideUp("medium");
					}
				});
 
				// agir sur le ul.menu_body en cours de traitement
				self.slideToggle("medium");
			});
 
			/*
			 * Les modifications de style et de taille doivent
			 * se faire ici, exclusivement.
			 */
			$("ul.menu_body li a").click(function(){
 
				function(){
					$(this).css("font-weight","bold").animate({ paddingLeft: "20px" }, 50 );
				},
				function(){
					$(this).css("font-weight","normal").animate({ paddingLeft: "10px" }, 50 );
				}
			);
 
		return false;});
	</script>
</body>  
 
 
 
 
 
</html>

juste je fait une modification ,je change ce code

Code :

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

1
2
3
4
5
6
7
8
9
10
$("ul.menu_body li a").hover(
				function(){
					$(this).css("font-weight","bold").animate({ paddingLeft: "20px" }, 50 );
				},
				function(){
					$(this).css("font-weight","normal").animate({ paddingLeft: "10px" }, 50 );
				}
			);
 
		});

merci d'avance

alen22 · 22/04/2011, 09h08

vraiment je n'arrive pas à régler le code avec ta solution

Code :

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

1
2
3
4
5
 
 
$("ul.menu_body li a").click(function(){
.../...
return false;});

SpaceFrog · 22/04/2011, 09h19

Code :

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

1
2
	return false;});
	</script>

heu la ton return false il est sur le

Code :

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

 $(function(){

pas sur le click

alen22 · 22/04/2011, 12h57

merci pour votre réponse

mais j'essaye avec ce 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
<script type="text/javascript">
$(function(){
 
	$("ul.menu_body li:even").addClass("alt");
 
	$("img.menu_head").click(function(){
		/*
		 * On doit fermer les menus que l'utilisateur
		 * aurait laissés ouverts.
		 */
 
		// ul.menu_body en cours de traitement
		var self = $(this).next();
 
		// fermer tous les autres ul.menu_body
		$("ul.menu_body").each(function(i, item){
			if (item != self[0]){
				$(item).slideUp("medium");
			}
		});
 
		// agir sur le ul.menu_body en cours de traitement
		self.slideToggle("medium");
	});
 
	/*
	 * Les modifications de style et de taille doivent
	 * se faire ici, exclusivement.
	 */
	$("ul.menu_body li a").hover(
		function(){
			$(this).css("font-weight","bold").animate({ paddingLeft: "20px" }, 50 );
		},
		function(){
			$(this).css("font-weight","normal").animate({ paddingLeft: "10px" }, 50 );
		}
	);
 
	return false;});
	</script>

mais même chose lorsque je clique dans l'un de menu (navigate) la page web se déplace vers le bas

SpaceFrog · 22/04/2011, 13h36

le return false doit juste etre avant le ) fermant du click

alen22 · 22/04/2011, 13h57

j'essaye avec

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
 
 
 
<script type="text/javascript">
$(function(){
 
	$("ul.menu_body li:even").addClass("alt");
 
	$("img.menu_head").click(function(){
		/*
		 * On doit fermer les menus que l'utilisateur
		 * aurait laissés ouverts.
		 */
 
		// ul.menu_body en cours de traitement
		var self = $(this).next();
 
		// fermer tous les autres ul.menu_body
		$("ul.menu_body").each(function(i, item){
			if (item != self[0]){
				$(item).slideUp("medium");
			}
		});
 
		// agir sur le ul.menu_body en cours de traitement
		self.slideToggle("medium");
	});
 
	/*
	 * Les modifications de style et de taille doivent
	 * se faire ici, exclusivement.
	 */
	$("ul.menu_body li a").hover(
		function(){
			$(this).css("font-weight","bold").animate({ paddingLeft: "20px" }, 50 );
		},
		function(){
			$(this).css("font-weight","normal").animate({ paddingLeft: "10px" }, 50 );
		}
	return false;);
 
	});
	</script>

mais le problème toujours le même

vous dite que je dois mettre return false avec ) et en fermant .click j'essaye aussi avec

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
<script type="text/javascript">
$(function(){
 
	$("ul.menu_body li:even").addClass("alt");
 
	$("img.menu_head").click(function(){
		/*
		 * On doit fermer les menus que l'utilisateur
		 * aurait laissés ouverts.
		 */
 
		// ul.menu_body en cours de traitement
		var self = $(this).next();
 
		// fermer tous les autres ul.menu_body
		$("ul.menu_body").each(function(i, item){
			if (item != self[0]){
				$(item).slideUp("medium");
			}
		});
 
		// agir sur le ul.menu_body en cours de traitement
		self.slideToggle("medium");
		return false;});
 
	/*
	 * Les modifications de style et de taille doivent
	 * se faire ici, exclusivement.
	 */
	$("ul.menu_body li a").hover(
		function(){
			$(this).css("font-weight","bold").animate({ paddingLeft: "20px" }, 50 );
		},
		function(){
			$(this).css("font-weight","normal").animate({ paddingLeft: "10px" }, 50 );
		}
	);
 
	});
 
	</script>

mais le problème toujours le même

merci d'avance

SpaceFrog · 22/04/2011, 14h31

sur les a ....

alen22 · 22/04/2011, 14h59

tu veux dire :

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
 
<script type="text/javascript">
$(function(){
 
	$("ul.menu_body li:even").addClass("alt");
 
	$("img.menu_head").click(function(){
		/*
		 * On doit fermer les menus que l'utilisateur
		 * aurait laissés ouverts.
		 */
 
		// ul.menu_body en cours de traitement
		var self = $(this).next();
 
		// fermer tous les autres ul.menu_body
		$("ul.menu_body").each(function(i, item){
			if (item != self[0]){
				$(item).slideUp("medium");
			}
		});
 
		// agir sur le ul.menu_body en cours de traitement
		self.slideToggle("medium");
		});
 
	/*
	 * Les modifications de style et de taille doivent
	 * se faire ici, exclusivement.
	 */
	$("ul.menu_body li a").hover(
		function(){
			$(this).css("font-weight","bold").animate({ paddingLeft: "20px" }, 50 );
		},
		function(){
			$(this).css("font-weight","normal").animate({ paddingLeft: "10px" }, 50 );
		}
	return false;);
 
	});
 
	</script>

SpaceFrog · 22/04/2011, 15h08

click de a

Ce qui se passe (Comme je l'ai précisé dans ma première intervention ....) est que le click sur une balise a enclenche le href ....
href=> rechargement de page ...

alen22 · 22/04/2011, 15h40

si possible vous pouvez mettre votre solution dans le code qui j'ai déjà envoyer

car je trouve une difficulté pour adopter mon code avec votre solution
merci d'avance

danielhagnoul · 22/04/2011, 21h45

Bonsoir

Un tableau qui s'agrandit bouscule l'ordonnancement de la page en prenant de la place, c'est évident oui !

Ma réponse utilisait vos codes CSS et jQuery pour répondre à votre première question.

Pour la disposition dans la page, une solution est de mettre votre tableau en positionnement fixed avec un z-index élevé et de mettre la suite dans une division avec un margin-top adapté à l'encombrement de la barre de menu.

Ma proposition fonctionne sous IE9, C10 et F4. Pour les navigateurs obsolètes, je ne sais pas. Il faudra peut-être passer d'un positionnement fixed à un positionnement absolu, mais je n'ai aucun moyen de tester.

Si vous ne faites pas du HTML5, n'oubliez pas de changer les tags, exemple <section> en <div>.

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		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; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        /*ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }*/
        /*li {padding-bottom:6px; }*/
		.conteneur { width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* TEST */
		ul,ol,dl {list-style:none; }
        .tableMenu {position:fixed; z-index:9999; }
		.menu {vertical-align:text-top; }
		.menu_head{border:1px solid #998675; }
		.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675; }
		.menu_body li{background:#493e3b;}
		.menu_body li.alt{background:#362f2d;}
		.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
		.divSousMenu {margin-top:60px; } /* il faut ajuster la valeur pour laisser la place au menu_head */
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<table class="tableMenu">
			<tbody>
				<tr>
					<td class="menu">
						<img src="navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="http://www.google.tn">XHTML</a></li>
							<li><a href="./Acceuil.html">HTML</a></li>
							<li><a href="./test.html">Difference XHTML-HTML</a></li>
							<li><a href="./test2.html">HTML 5</a></li>
						</ul>
					</td>
					<td class="menu">
						<img src="navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="#">Windows XP</a></li>
							<li><a href="../windows7.php">Windows 7</a></li>
							<li><a href="../unix.php">Unix</a></li> <!-- ajout de </a> -->
						</ul>
					</td>
					<td class="menu">
						<img src="navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="#">Word 2003</a></li>
							<li><a href="#">Excel 2003</a></li>
							<li><a href="#">PowerPoint 2003</a></li> <!-- ajout de </a> -->
						</ul>
					</td>
					<td class="menu">
						<img src="navigate.png" width="184" height="32" class="menu_head" />
						<ul class="menu_body">
							<li><a href="#">Fichiers PSD 2003</a></li> <!-- ajout de </a> -->
							<li><a href="#">Icones</a></li>
							<li><a href="#">Icones Facebook</a></li>
							<li><a href="#">Icones Twitter</a></li> <!-- ajout de </a> -->
						</ul>
					</td>
				</tr>
			</tbody>
		</table>
        <div class="divSousMenu">
            <input type="text" value="salut" name="valeur"/>
            <h2>suite de code de la page jsp</h2>
        </div>
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script>
		$(function(){
 
			$("ul.menu_body li:even").addClass("alt");
 
			$("img.menu_head").click(function(){
				/*
				 * On doit fermer les menus que l'utilisateur
				 * aurait laissés ouverts.
				 */
 
				// ul.menu_body en cours de traitement
				var self = $(this).next();
 
				// fermer tous les autres ul.menu_body
				$("ul.menu_body").each(function(i, item){
					if (item != self[0]){
						$(item).slideUp("medium");
					}
				});
 
				// agir sur le ul.menu_body en cours de traitement
				self.slideToggle("medium");
			});
 
			/*
			 * Les modifications de style et de taille doivent
			 * se faire ici, exclusivement.
			 */
			$("ul.menu_body li a").hover(
				function(){
					$(this).css("font-weight","bold").animate({ paddingLeft: "20px" }, 50 );
				},
				function(){
					$(this).css("font-weight","normal").animate({ paddingLeft: "10px" }, 50 );
				}
			);
 
		});
	</script>
</body>  
</html>

alen22 · 22/04/2011, 23h09

merci ,ca marche

22/04/2011, 13h36	#10
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	le return false doit juste etre avant le ) fermant du click __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

22/04/2011, 14h31	#12
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	sur les a .... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

22/04/2011, 15h08	#14
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	click de a Ce qui se passe (Comme je l'ai précisé dans ma première intervention ....) est que le click sur une balise a enclenche le href .... href=> rechargement de page ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

10/04/2011, 12h10	#3
alen22 Candidat au titre de Membre du Club franco Inscription : mars 2011 Messages : 199 Détails du profil Informations personnelles : Nom : franco Informations forums : Inscription : mars 2011 Messages : 199 Points : 11 Points : 11	merci pour votre réponse, c'est exactement que je veux
	00

22/04/2011, 15h40	#15
alen22 Candidat au titre de Membre du Club franco Inscription : mars 2011 Messages : 199 Détails du profil Informations personnelles : Nom : franco Informations forums : Inscription : mars 2011 Messages : 199 Points : 11 Points : 11	si possible vous pouvez mettre votre solution dans le code qui j'ai déjà envoyer car je trouve une difficulté pour adopter mon code avec votre solution merci d'avance
	00

22/04/2011, 23h09	#17
alen22 Candidat au titre de Membre du Club franco Inscription : mars 2011 Messages : 199 Détails du profil Informations personnelles : Nom : franco Informations forums : Inscription : mars 2011 Messages : 199 Points : 11 Points : 11	merci ,ca marche
	00

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