Menu déroulant au click pour le web mobile

**dadidodu85** · 22/06/2017, 13h45

Bonjour,

j'ai fais un site pour mon club et sur la page index j'ai mis un lien vers une version du site pour web mobile (pour smartphone et tablette). J'ai fais un code css en remplacant le hoover du menu par click mais le résultat n'est pas celui que je veux. Je voudrais cliquer sur un lien qui m'ouvre un menu déroulant mais qui reste à l'affichage

.
Pour info le site web est à l'adresse suivante : http://aikidochauray.chez.com/

mon code html pour l'index version mobile est :

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
<body>
	<header>
	<nav class="menu">
		<ul id="menu-deroulant">
		<li><a id="lien" href="indexT.htm">Menu</a>
			<ul>
			<li><a id="lien" href="indexT.htm">Accueil</a></li>
			<li><a id="lien" href="page1T.htm"> Le mot du Président</a></li>
			<li><a id="lien" href="page2T.htm"> L’aïkido</a></li>
			<li><a id="lien" href="page3T.htm"> Le club</a></li>
			<li><a id="lien" href="page4T.htm"> Notre fonctionnement</a></li>
			<li><a id="lien" href="page5T.htm"> Galerie photos</a></li>
			<li><a id="lien" href="page6T.htm"> Liens</a></li>
			<li><a id="lien" href="mailto:aikido.chauray@gmail.com?subject=Information%20Aïkido" target=principal class="vertical">Contact</a></li>
			<li><a id="lien" href="page7T.htm"> Calendrier</a></li>
			<li><a id="lien" href="page8T.htm"> Documents</a></li>
			<li><a id="lien" href="tarifT.htm"> Tarifs</a></li>
			</ul>
		</li>
		</ul>
	</nav>
 
	</header>

Et le code css qui gère le menu est :

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
#menu {/*Fixe le menu de gauche*/ 
	padding: 0px;
	margin-top: 100px;
	position:fixed;
	overflow: hidden ;
}
 
#lien {/*Format des liens*/ 
	text-decoration:none;
	line-height:200%;
	font-family: Comic Sans MS,Candara,Verdana;
	font-size: 13.0pt;
	color: #FFFFFF;
	text-shadow: 0px 1px 0px black;
	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
	padding-top: 4px; 
	padding-bottom: 4px; 
	padding-right:10px;
	padding-left: 10px; 
	text-align:center;
	background:#555; 
	background: linear-gradient( #777, #2C2C2C);
	border-radius: 8px;
	box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4);
}
 
#menu-deroulant ul {
    padding: 0;
    margin: 0;
    list-style: none;
	position: absolute;
/* on cache les sous menus complètement sur la gauche */
    left: -999em;
    text-align: left;
    z-index: 1000;
	width: 100px; /* seule ligne rajoutée */
}
#menu-deroulant :click{ left: auto;float:none /*color: #A9A9A9; background: #666; background: linear-gradient( #999, #333);*/ }
/*#menu-deroulant :active{ color: #000; background: #777; background: linear-gradient( #777, #2C2C2C); box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}*/
 
ul{list-style-type:none}/*Format des listes*/ 
 
 
#menu-deroulant {
/* on centre le menu dans la page */
    text-align: center;
}
#menu-deroulant li {
/* on place les liens du menu horizontalement */
    float:left;
	border-left:1px solid black;
	display: inline-block;
}
 #menu-deroulant ul li {
 /*on enlève ce comportement pour les liens du sous menu*/ 
    display: inherit;
	float:left;
	position: relative
}
#menu-deroulant a {
	text-decoration:none;
	display: block;
	float:left; 
	width:100px;
	line-height:180%;
	font-family: Comic Sans MS,Candara,Verdana;
	font-size: 13.0pt;
	color: #FFFFFF;
	text-shadow: 0px 1px 0px black;
	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
	padding-top: 4px; 
	padding-bottom: 4px; 
	padding-right:10px;
	padding-left: 10px; 
	text-align:center;
	background:#555; 
	background: linear-gradient( #777, #2C2C2C);
	border-radius: 8px;
	box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4);
}
 
 
#menu-deroulant li:active ul {
/* Au survol des li du menu on replace les sous menus */
    left: auto;
	color: #A9A9A9; background: #666; background: linear-gradient( #999, #333);
}

Comme vous pouvez voir je débute et tripatouille ...

Invité · 23/06/2017, 07h53

Bonjour,

1/ LIS les cours CSS.

2/ id="lien" :
non. Un id doit être unique.
Il faut utiliser ici class

3/ quant à ta question, c'est du domaine de JavaScript.

"afficher/masquer div au clic"

4/ pour améliorer le référencement des pages, donne-leur des noms plus explicites que page1.htm, page2.htm, page3.htm,,....

**dadidodu85** · 23/06/2017, 11h09

Je te remercie, jreaux, je regarde ça ce midi. Pour info j'ai pas mal cherché sur internet sans trouvé de réponse satisfaisante, c'est pour ça que j'ai posté ce message.

**dadidodu85** · 26/06/2017, 13h27

Bonjour,

Je suis toujours bloqué sur la même situation. J'ai beaucoup cherché sur internet mais peu compris, les solutions proposées me paraissent très compliqué pour une si petite chose...
J'ai changer, pour faire apparaitre un menu en liste déroulante après un click sur un bouton (pour les smartphones) j'ai écris le code ci-après, le menu se déroule mais ne reste pas déroulé... Résultat avec un doigt c'est dur de naviguer

Html

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
<nav class="menu">
		<ul id="menu-deroulant">
		<li><button id="lien">Menu</button>
			<ul>
			<li><a id="lien" href="indexT.htm">Accueil</a></li>
			<li><a id="lien" href="page1T.htm"> Le mot du Président</a></li>
			<li><a id="lien" href="page2T.htm"> L’aïkido</a></li>
			<li><a id="lien" href="page3T.htm"> Le club</a></li>
			<li><a id="lien" href="page4T.htm"> Notre fonctionnement</a></li>
			<li><a id="lien" href="page5T.htm"> Galerie photos</a></li>
			<li><a id="lien" href="page6T.htm"> Liens</a></li>
			<li><a id="lien" href="mailto:aikido.chauray@gmail.com?subject=Information%20Aïkido" target=principal class="vertical">Contact</a></li>
			<li><a id="lien" href="page7T.htm"> Calendrier</a></li>
			<li><a id="lien" href="page8T.htm"> Documents</a></li>
			<li><a id="lien" href="tarifT.htm"> Tarifs</a></li>
			</ul>
		</li>
		</ul>
	</nav>

J'ai laissé id car avec class je perdais le menu caché

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
87
88
 
#menu {/*Fixe le menu de gauche*/ 
	padding: 0px;
	margin-top: 100px;
	position:fixed;
	overflow: hidden ;
}
 
ul{list-style-type:none}/*Format des listes*/ 
 
#menu-deroulant ul {
    padding: 0;
    margin: 0;
    list-style: none;
	position: absolute;
/* on cache les sous menus complètement sur la gauche */
 
    left: -999em;
    text-align: left;
    z-index: 1000;
	width: 100px; /* seule ligne rajoutée */
}
#menu-deroulant :click{ left: auto;/*color: #A9A9A9; background: #666; background: linear-gradient( #999, #333);*/ }
/*#menu-deroulant :active{ color: #000; background: #777; background: linear-gradient( #777, #2C2C2C); box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}*/
 
 
#menu-deroulant {
/* on centre le menu dans la page */
    text-align: center;
}
#menu-deroulant li {
/* on place les liens du menu horizontalement */
    float:left;
	border-left:1px solid black;
	display: inline-block;
}
 #menu-deroulant ul li {
 /*on enlève ce comportement pour les liens du sous menu*/ 
    display: inherit;
	float:left;
	position: relative
}
#menu-deroulant a {
	text-decoration:none;
	display: block;
	float:left; 
	width:200px;
	line-height:180%;
	font-family: Comic Sans MS,Candara,Verdana;
	font-size: 13.0pt;
	color: #FFFFFF;
	text-shadow: 0px 1px 0px black;
	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
	padding-top: 4px; 
	padding-bottom: 4px; 
	padding-right:10px;
	padding-left: 10px; 
	text-align:center;
	background:#555; 
	background: linear-gradient( #777, #2C2C2C);
	border-radius: 8px;
	box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4);
}
 
#menu-deroulant li:active ul {
/* Au survol des li du menu on replace les sous menus */
    left: auto;
	color: #A9A9A9; background: #666; background: linear-gradient( #999, #333);
}
 
#lien {/*Format des liens*/ 
	text-decoration:none;
	line-height:200%;
	font-family: Comic Sans MS,Candara,Verdana;
	font-size: 13.0pt;
	color: #FFFFFF;
	text-shadow: 0px 1px 0px black;
	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
	padding-top: 4px; 
	padding-bottom: 4px; 
	padding-right:10px;
	padding-left: 10px; 
	text-align:center;
	background:#555; 
	background: linear-gradient( #777, #2C2C2C);
	border-radius: 8px;
	box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4);
}

J'avoue ma nullité...

Invité · 26/06/2017, 15h33

Envoyé par dadidodu85

J'ai laissé id car avec class je perdais le menu caché

Si tu ne suis pas les règles - et les recommandations -, on ne peut rien pour toi.

**Doksuri** · 26/06/2017, 15h46

Envoyé par dadidodu85

J'ai laissé id car avec class je perdais le menu caché

comme l'a precise jreaux62, il faut suivre les regles/recommandations.

pour preciser sa reponse : tu dois changer le id="lien" en class="lien"
=> c'est normal que tu perdes ton menu car le CSS s'applique a l'id "lien" (qui sera maintenant une class)
==> il faut en parallele changer ton CSS : remplace les elements lies a #lien{...} par .lien{...}

Invité · 26/06/2017, 16h25

@Doksuri
Je l'avais déjà indiqué dans mon 1er message, de même que l'utilisation de JavaScript pour une "action au clic".

"JavaScript afficher/masquer div au clic"

Menu déroulant au click pour le web mobile

CSS

Vue hybride

Discussions similaires

Partager

Partager