menu retour indésirable en haut de page

Version imprimable

salut,

j'ai un menu animé avec jqury

qui a ce code
pour css

Code:

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:

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:

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

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:

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>

10/04/2011, 12h10
alen22

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

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:

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

ou n'importe autre balise

Code:

<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:

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

20/04/2011, 21h12
SpaceFrog
il manque juste le return false pour inhiber le href ...
Code:

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

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:

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:

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

22/04/2011, 09h08
alen22
vraiment je n'arrive pas à régler le code avec ta solution
Code:

1 2 3 4 5 $("ul.menu_body li a").click(function(){ .../... return false;});
22/04/2011, 09h19
SpaceFrog
Code:

1 2 return false;}); </script>
heu la ton return false il est sur le

Code:

$(function(){

pas sur le click :roll:

merci pour votre réponse

mais j'essaye avec ce code :

Code:

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

22/04/2011, 13h36
SpaceFrog

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

j'essaye avec

Code:

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:

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

22/04/2011, 14h31
SpaceFrog

sur les a ....

tu veux dire :

Code:

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>

22/04/2011, 15h08
SpaceFrog

click de a :roll:

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 ...
22/04/2011, 15h40
alen22

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

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:

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>

22/04/2011, 23h09
alen22

merci ,ca marche