retour haut de page

Bonjour,

J'ai crée un menu en javascript le seul problème qui y'a c'est que lorsque qu'on clique sur un menu qui est en bas de page la page remonte automatiquement et il faut redescendre pour voir le menu qui c'est ouvert ...
J'ai chercher d'ou cela venait mais je n'ai pas encore trouver pouvez vous m''aider je vous en remercie d'avance voici mon code

Page principal

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
     <title>Menu déroulant vertical sur clic</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	 <link rel="stylesheet" href="style.css" type="text/css" />
	 <script type="text/javascript" src="functions.js"></script>
</head>
<body>
 
<div id="menug" >
	<div class="menu mfond1" id="menu1" onclick="afficheMenu(this)">
	  <p><a href="#"><img src="spacer.gif" alt="" width="42" height="41" border="0" align="absmiddle" /><span class="txtsom" >Menu 1</span></a></p>
	</div>
	<div id="sousmenu1" style="display:none">
		<div class="sousmenu fondsous">
			<a href="lien1">sous menu 1</a>
		</div>		<div class="sousmenu fondsous">
			<a href="lien2">sous menu 2</a>
		</div>
		<div class="sousmenu fondsous">
			<a href="lien3">sous menu 3</a>
		</div>
		<div class="sousmenu fondsous">
			<a href="lien4">sous menu 4</a>
		</div>
 
	<div class="menu mfond2" id="menu2" onclick="afficheMenu(this)">
	  <p><a href="#"><img src="spacer.gif" alt="" width="42" height="41" border="0" align="absmiddle" /><span class="txtsom" >Menu 4</span></a></p>
	</div>
	<div id="sousmenu2" style="display:none">
		<div class="sousmenu fondsous">
			<a href="lien1">sous menu 1</a>
		</div>		<div class="sousmenu fondsous">
			<a href="lien2">sous menu 2</a>
		</div>
		<div class="sousmenu fondsous">
			<a href="lien3">sous menu 3</a>
		</div>
		<div class="sousmenu fondsous">
			<a href="lien4">sous menu 4</a>
		</div>
 
	<div class="menu mfond3" id="menu3" onclick="afficheMenu(this)">
	  <p><a href="#"><img src="spacer.gif" alt="" width="42" height="41" border="0" align="absmiddle" /><span class="txtsom" >Menu 3</span></a></p>
	</div>
	<div id="sousmenu3" style="display:none">
		<div class="sousmenu fondsous">
			<a href="lien1">sous menu 1</a>
		</div>		<div class="sousmenu fondsous">
			<a href="lien2">sous menu 2</a>
		</div>
		<div class="sousmenu fondsous">
			<a href="lien3">sous menu 3</a>
		</div>
		<div class="sousmenu fondsous">
			<a href="lien4">sous menu 4</a>
		</div>
 
	<div class="menu mfond4" id="menu4" onclick="afficheMenu(this)">
	  <p><a href="#"><img src="spacer.gif" alt="" width="42" height="41" border="0" align="absmiddle" /><span class="txtsom" >Menu 4</span></a></p>
	</div>
	<div id="sousmenu4" style="display:none">
		<div class="sousmenu fondsous">
			<a href="lien1">sous menu 1</a>
		</div>		<div class="sousmenu fondsous">
			<a href="lien2">sous menu 2</a>
		</div>
		<div class="sousmenu fondsous">
			<a href="lien3">sous menu 3</a>
		</div>
		<div class="sousmenu fondsous">
			<a href="lien4">sous menu 4</a>
		</div>
 
	<div class="menu mfond5" id="menu5" onclick="afficheMenu(this)">
	  <p><a href="#"><img src="spacer.gif" alt="" width="42" height="41" border="0" align="absmiddle" /><span class="txtsom" >Menu 5</span></a></p>
	</div>
	<div id="sousmenu5" style="display:none">
		<div class="sousmenu fondsous">
			<a href="lien1">sous menu 1</a>
		</div>		<div class="sousmenu fondsous">
			<a href="lien2">sous menu 2</a>
		</div>
		<div class="sousmenu fondsous">
			<a href="lien3">sous menu 3</a>
		</div>
		<div class="sousmenu fondsous">
			<a href="lien4">sous menu 4</a>
		</div>
 
	<div class="menu mfond6" id="menu6" onclick="afficheMenu(this)">
	  <p><a href="#"><img src="spacer.gif" alt="" width="42" height="41" border="0" align="absmiddle" /><span class="txtsom" >Menu 6</span></a></p>
	</div>
	<div id="sousmenu6" style="display:none">
		<div class="sousmenu fondsous">
			<a href="lien1">sous menu 1</a>
		</div>		<div class="sousmenu fondsous">
			<a href="lien2">sous menu 2</a>
		</div>
		<div class="sousmenu fondsous">
			<a href="lien3">sous menu 3</a>
		</div>
		<div class="sousmenu fondsous">
			<a href="lien4">sous menu 4</a>
		</div>
 
 
  </div>
</body>
</html>

LE fichier function.js

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
function afficheMenu(obj){
 
	var idMenu     = obj.id;
	var idSousMenu = 'sous' + idMenu;
	var sousMenu   = document.getElementById(idSousMenu);
 
	for(var i = 1; i <= 15; i++){
		if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
			document.getElementById('sousmenu' + i).style.display = "none";
		}
	}
 
	if(sousMenu){
		//alert(sousMenu.style.display);
		if(sousMenu.style.display == "block"){
			sousMenu.style.display = "none";
		}
		else{
			sousMenu.style.display = "block";
		}
	}
 
 
}

et le fichier style.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
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
*{
	margin:0;
	padding:0;
}
.esp{
	width:190px;
	height:25px;
}
.txtsom{
	color:#FFFFFF}
#esp{
	width:190px;
	height:25px;
}
.fin{
	width:190px;
	height:14px;
	background-image:url("index_25.jpg");
}
#fin{
	width:190px;
	height:14px;
	background-image:url("index_25.jpg");
}
#menu{
	width:190px;
	height:41px;
}
.menu{
	height:41px;
	width:190px;
	padding:0px 0;
 
}
.mfond1{background-image:url("menusomds.gif");
}
.mfond2{background-image:url("menusomordinateur.gif");
}
.mfond3{background-image:url("menusomps3.gif");
}
.mfond4{background-image:url("menusomdreamcast.gif");
}
.mfond5{background-image:url("menusomsega.gif");
}
.mfond6{background-image:url("menusommulti.gif");
}
.mfond7{background-image:url("menusomxbox.gif");
}
.mfond8{background-image:url("menusomneogeo.gif");
}
.mfond9{background-image:url("menusomnec.gif");
}
.mfond10{background-image:url("menusomxbox.gif");
}
.mfond11{background-image:url("menusomnes.gif");
}
.mfond12{background-image:url("menusommulti.gif");
}
.sousmenu{
	height:27px;
	width:190px;
	padding:0px 0;
}
.menu a{
	display:block;
	width:100%;
	height:100%;
	color:#000;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}
.fondsous{	background-image:url("index2_16.jpg");
}
.sousmenu a{
  position: relative;
  left: 2.8em;
  	width:100%;
	height:100%;
	font-family:arial,sans-serif;
	font-size:12px;
	text-decoration:none;
	color: #333333;
 
}

je vous remercie de votre futur aide ;)

<a href="#"> = haut de page

scrollTo
scrollTop ...

bref ce ne sont pas les possibilités qui manquent

Scrolltop

Je n'est pas très bien compri ...
J'y connais pas grand chose en Javascript , le scrolltip je le met ou et comment ?

Je vous remercie de votre aide :-)

Le scrollTo n'est pas adapté dans ce cas-ci. Comme l'a dit ZeroDivide, ce sont les liens qui font que la page "remonte".

Il y a différentes possibilités pour éviter cela mais la plus rapide pour adapter votre code à mon avis c'est d'annuler l'effet du tag <a> avec un onclick="return false;" :

Code:

<a href="#" onclick="return false;">

Merci

Merci a toi vermine pour ton aide sa fonctionne parfaitement :P Un grand merci a toi

@Vermine : donc avec le return false le srollTo focntionne aussi ;)

Citation:

Envoyé par SpaceFrog

@Vermine : donc avec le return false le srollTo focntionne aussi ;)

Chuuut. Si on te demande, tu dis que tu étais en train de faire tes courses à ce moment-là et que Pierre à renier trois fois Jésus le jour de sa mort.

:oops: :oops: :oops: