retour haut de page [Résolu]

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

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.

27/10/2011, 01h10	#4
thomix68 Invité régulier gdgfs thomas Inscription : juillet 2010 Messages : 19 Détails du profil Informations personnelles : Nom : gdgfs thomas Informations forums : Inscription : juillet 2010 Messages : 19 Points : 5 Points : 5	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 :-)
	00

27/10/2011, 14h07	#5
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 691 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 691 Points : 5 761 Points : 5 761	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". __________________ Elen Poukram - Isegoria - Sandawe
	00

27/10/2011, 14h18	#6
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 691 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 691 Points : 5 761 Points : 5 761	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;"> __________________ Elen Poukram - Isegoria - Sandawe
	00

27/10/2011, 22h10	#7
thomix68 Invité régulier gdgfs thomas Inscription : juillet 2010 Messages : 19 Détails du profil Informations personnelles : Nom : gdgfs thomas Informations forums : Inscription : juillet 2010 Messages : 19 Points : 5 Points : 5	Merci Merci a toi vermine pour ton aide sa fonctionne parfaitement Un grand merci a toi
	00

28/10/2011, 09h48	#8
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 041 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 041 Points : 45 143 Points : 45 143	@Vermine : donc avec le return false le srollTo focntionne aussi __________________ 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

26/10/2011, 19h36	#2
ZeroDivide Invité régulier Inscription : octobre 2011 Messages : 14 Détails du profil Informations personnelles : Localisation : France, Nord (Nord Pas de Calais) Informations forums : Inscription : octobre 2011 Messages : 14 Points : 9 Points : 9	<a href="#"> = haut de page
	00

26/10/2011, 19h40	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 041 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 041 Points : 45 143 Points : 45 143	scrollTo scrollTop ... bref ce ne sont pas les possibilités qui manquent __________________ 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

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