Menu déroulant au clic

**ytzmi** · 27/04/2015, 17h28

Bonjour,

j'ai adapté un menu déroulant qui fonctionne bien tant qu'il est sur une page internet via un ordinateur.

on m'a fait remarquée, qu'il n'est pas fonctionnelle pour les tablettes ou mobiles.
car lorsque on "clic" sur le menu, le menu ne se déroule pas et on remonte directement en haut de la page.

donc, j'aimerai savoir où dois-je modifier mon script ou texte pour que l'on puisse cliquer sur le menu pour qu'il se déroule.

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
#menu, #menu ul
 {
  padding:0;
  margin:0;
  list-style:none;
  text-align:center;
  z-index: 1000;
 }
 
#menu li
 {
  display:inline-block;
  position:relative; /* Crée un contexte de positionnement pour les sous-listes */
  border-radius:8px 8px 0 0;
 } 
 
#menu ul li
 {
  display:inherit;
  border-radius:0;
 } 
 
#menu ul li:hover
 {
  border-radius:0;
 }
 
#menu ul li:last-child
 {
  border-radius:0 0 8px 8px;
 }
 
#menu ul
 {
  position: absolute; /* Evite que la dimension du conteneur ne change quand la sous-liste est affichée */
  max-height: 0;
  left: 0; /* FIX IE7 : pour que le sous-menu s'aligne avec son conteneur */
  right: 0;
  overflow: hidden;
  -moz-transition: .8s all .3s;
  -webkit-transition: .8s all .3s;
  transition: .8s all .3s;
 }
 
/* donne la longueur du déroulant, diminuer ou augmenter le 30em selon le nombre de liens */
#menu li:hover ul
 {
  max-height:30em;
 } 
 
/* background des liens menus */
 
/*menu 1
couleur dégradée */ 
 
#menu li:first-child
 {
  background-color: #81BEF7;
  background-image:-webkit-linear-gradient(top, #81BEF7 0%, #58D3F7 100%);
  background-image:linear-gradient(to bottom, #81BEF7 0%, #58D3F7 100%);
 }
 
/*menu 2 */
#menu li:nth-child(2) 
 {
  background-color: #CC2EFA;
  background-image: -webkit-linear-gradient(top, #CC2EFA 0%, #663399 100%);
  background-image:linear-gradient(to bottom, #CC2EFA 0%, #663399 100%);
 }
 
/* menu 3 */
#menu li:nth-child(3)
 {
  background-color: #009999;
  background-image:-webkit-linear-gradient(top, #009999 0%, #00CC99 100%);
  background-image:linear-gradient(to bottom, #009999 0%, #00CC99 100%);
 }
 
/* menu 4 (couleur rouge - non utilisé actuellement, fichier non téléchargé sur le FTP*/
#menu li:nth-child(4)
 {
  background-color: #FF3300;
  background-image:-webkit-linear-gradient(top, #FF3300 0%, #FF99CC 100%);
  background-image:linear-gradient(to bottom, #FF3300 0%, #FF99CC 100%);
 }
 
 
/* menu 5 c-a-d le dernier menu */
#menu li:last-child
 {
  background-color: #FF9966;
  background-image:-webkit-linear-gradient(top, #FF9966 0%, #CC9999 100%);
  background-image:linear-gradient(to bottom, #FF9966 0%, #CC9999 100%);
 }
 
/* background des liens sous menus = déroulant */
#menu li:first-child li
 {
  background:#58D3F7;
 }
 
#menu li:nth-child(2) li
 {
  background:#663399;
 }
 
#menu li:nth-child(3) li
 {
  background:#00CC99;
 }
 
#menu li:nth-child(4) li
 {
  background:#FF99CC;
 }
 
#menu li:last-child li
 {
  background:#CC9999;
 } 
 
/* background des liens menus et sous menus au survol */
 
#menu
 li:first-child:hover, #menu li:first-child li:hover
 {
  background:#81BEF7;
 }
 
#menu
 li:nth-child(2):hover, #menu li:nth-child(2) li:hover
 {
  background:#CC2EFA;
 }
 
#menu
 li:nth-child(3):hover, #menu li:nth-child(3) li:hover
 {
  background:#009999;
 }
 
#menu
 li:nth-child(4):hover, #menu li:nth-child(4) li:hover
 {
  background:#FF3300;
 }
 
#menu li:last-child:hover, #menu li:last-child li:hover
 {
  background:#FF9966;
 } 
 
/* les a href */
#menu a
 {
  text-decoration:none;
  display:block;
  padding:8px 32px;
  color:#fff;
  font-family:arial;
 }
 
#menu ul a
 {
  padding:8px 0;
 }
 
#menu li:hover li a
 {
  color:#fff;
  text-transform:inherit;
 }
 
#menu li:hover a, #menu li li:hover a
 {
  color:#000;
 }

dois-je rajouter un fichier function.js où je dois spécifier un onclick mais là, franchement, je ne sais pas le faire.

j'ai beau chercher et tenter de comprendre tous les menus créés mais je n'y arrive pas...
merci de votre aide, en espérant que je sois au bon endroit.

Invité · 28/04/2015, 11h13

Bonjour,

Tu peux regarder ceci pour voir si ça te conviendrait pas :
http://www.developpez.net/forums/d14...e/#post8096889

Invité · 28/04/2015, 11h14

Bonjour,
il manque :

le code HTML associé
et, puisque le site est en ligne, son URL (pour pouvoir tester)

**ytzmi** · 28/04/2015, 18h20

merci pour vos réponses

voici le code html

Code html :

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

1
2
3
<head>
<link rel="StyleSheet" type="text/css" href="menu/style.css" />
</head>

Code html :

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
<ul id="menu">
	<li><a href="#" > Activit&eacute;s Sportives</a>
	<ul>
		<li><a href="aquagym.htm">Aquagym</a></li>
		<li><a href="dansenligne.htm">Danse en Ligne</a></li>
		<li><a href="golf.htm">Golf</a></li>
		<li><a href="gymdouce.htm">Gym Douce</a></li>
		<li><a href="gymchaise.htm">Gym sur Chaise</a></li>
		<li><a href="gymtonic.htm">Gym tonique</a></li>
		<li><a href="longecote.htm">Marche dans l'Eau ou Longe C&ocirc;te</a></li>
		<li><a href="petanque.htm">P&eacute;tanque</a></li>
		<li><a href="rando.htm">Randonn&eacute;e</a></li>
		<li><a href="relax.htm">Relaxation</a></li>
	</ul>
	</li>
	<li><a href="#"> Activit&eacute;s C&eacute;r&eacute;brales</a>
	<ul>
		<li><a href="informatic.htm">Informatique</a></li>
		<li><a href="meningym.htm">M&eacute;ningym</a></li>
		<li><a href="scrabble.htm">Scrabble</a></li>
	</ul>
	</li>
	<li><a href="#"> Activit&eacute;s Ludiques</a>
	<ul>
		<li><a href="bowling.htm">Bowling</a></li>
		<li><a href="chant_karaoke.htm">Chant et Karaok&eacute;</a></li>
		<li><a href="jeusociete.htm">Jeux de carte ou de soci&eacute;t&eacute;</a></li>
		<li><a href="pointcroix.htm">Point de croix - broderie</a></li>
		<li><a href="voyages.htm">Voyages et Visites</a></li>
	</ul>
	</li>
	<li><a href="#"> Photos des adhérents</a>
	<ul>
		<li><a href="photorando.htm">Photo de diverses randonn&eacute;es</a></li>
		<li><a href="pointcroix.htm">Photo des travaux de broderie</a></li>
		<li><a href="photovisites.htm">Photo de voyages, visites</a></li>
	</ul>
	</li>
</ul>

l'url est :

clubdynamic.beaussset.free.fr

on passe la souris sur le menu, il se déroule et on a accès aux diverses animations
mais si on clique, sur le titre du menu déroulant, on remonte en haut de la page.

merci pour votre aide.

Invité · 28/04/2015, 18h33

Envoyé par ytzmi

...mais si on clique, sur le titre du menu déroulant, on remonte en haut de la page....

Normal :

Code :

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

<a href="#" > Activit&eacute;s Sportives</a>

**ytzmi** · 28/04/2015, 20h03

<a href="#" > Activités Sportives</a>

normal pour toi...

mais moi, je ne vois pas ce qui est anormal sans explication...

Invité · 28/04/2015, 20h32

Code :

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

<a href="#" >

1/ Il s'agit d'un lien
2/ la cible est "#" qui est une ancre, vide ici.
Donc le lien, en cliquant dessus, va mener en haut de la page.

**ytzmi** · 30/04/2015, 18h25

bonjour

c'est bon, j'ai résolu mon problème... que je mets ici des fois que cela puisse servir à d'autres.

avant le menu, j'ai mis un span vide ayant pour id « none ».
Ensuite, dans les href, au lieu de mettre un simple #, je mets #none.

puis dans le CSS.
je rajoute ce code :
#none {display:none}

sur pc, cela fonctionne, pour les tablettes et mobiles, ce n'est pas tout à fait au point, il faut rester le doigt un peu plus longtemps pour que les menus s'affichent, mais en tout cas, cela ne remonte plus en haut de la page.

Invité · 30/04/2015, 21h04

Bonjour,
euhh....... en fait.... il suffisait juste d'enlever ces liens "vides", non ?

Oups ! Non (à cause du CSS). Donc -> les remplacer par de simple <span> :

Code html :

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
<ul id="menu">
	<li><span>Activités Sportives</span>
	<ul>
		...
	</ul>
	</li>
	<li><span>Activités Cérébrales</span>
	<ul>
		...
	</ul>
	</li>
	<li><span>Activités Ludiques</span>
	<ul>
		...
	</ul>
	</li>
	<li><span>Photos des adhérents</span>
	<ul>
		...
	</ul>
	</li>
</ul>