retour haut de page

**thomix68** · 26/10/2011, 18h12

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 :

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

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

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
*{
	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

**ZeroDivide** · 26/10/2011, 19h36

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

**SpaceFrog** · 26/10/2011, 19h40

scrollTo
scrollTop ...

bref ce ne sont pas les possibilités qui manquent

**thomix68** · 27/10/2011, 01h10

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

**vermine** · 27/10/2011, 14h07

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".

**vermine** · 27/10/2011, 14h18

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 :

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

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

**thomix68** · 27/10/2011, 22h10

Merci a toi vermine pour ton aide sa fonctionne parfaitement

Un grand merci a toi

**SpaceFrog** · 28/10/2011, 09h48

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

**vermine** · 28/10/2011, 16h54

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.

retour haut de page

JavaScript

Discussions similaires

Partager

Partager