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"

**dadidodu85** · 27/06/2017, 13h31

Merci Doksuri,

C'est plus clair, mais ça ne marche pas. J'ai remplacé tout les "id" par "class" et sur le css tout les "#" par ".", ça marche sur la mise en forme des textes mais je n'ai plus de liste déroulante après le click du bouton. Et jreault, j'ai regardé "afficher/masquer div au clic" ... mais je n'ai pas trouvé ce que je veux, c'est à dire en cliquant sur le bouton "menu" avoir un menu déroulant qui reste déroulé pour que l'on puisse cliquer sur les autres pages.
Et désolé de n'être qu'un novice qui essaye de comprendre

**NoSmoking** · 27/06/2017, 20h05

Bonjour,
il existe une technique pour faire cela sans javascript suivant l'approche faite dans Galerie au clic sans JavaScript.
Exemple de mise en oeuvre, pour plus de détail voir le lien.

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
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Menu au click sans javascript</title>
<meta name="Author" content="NoSmoking">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,
body {
  margin: 0;
  padding: 0;
  font: 1em/1.25 Verdana,sans-serif;
}
body {  -webkit-animation: bugfix infinite 1s;}
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; }}
main {
  display: block;
  margin: auto;
  max-width: 60em;
}
main p {
  text-align: justify;
}
main h1 {
  margin: .5em 0;
  color: #069;
}
nav {
  position: relative;
  width: 10em;
  min-height: 2em;
  border: 1px solid #CCC;
  line-height: 2em;
  cursor: pointer;
}
nav ul {
  position: absolute;
  left: -1px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: inherit;
  background: #FFF;
}
nav li {
  margin: 0;
  white-space: nowrap;
  list-style-type: none;
}
nav a {
  display: block;
  text-decoration: none;
  text-indent: .25em;
  color: #069;  
  border: 1px solid transparent;  
}
nav li:hover a {
  color: #00F;
  background: #CDE;
  border: 1px solid #069;
}
 
#menu_expand {
  position: absolute;
  left: -9999em;
}
[for="menu_expand"] {
  display: block;
  text-indent: .25em;
  background: #EEE;
  border: 1px solid #CCC;
  margin: 1px;
  cursor: pointer;
}
[for="menu_expand"]:before {
  content: "\2630";  
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1em;
  text-align: center;
  text-indent: 0;
  font-size: 2em;
  font-weight: bold;
  color: #069;
}
 
/* on traite la liste menu */
#menu_expand:not(:checked) ~ ul {
  display: none;
  position: absolute;
  left: -1px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: inherit;
  background: #FFF;
}
#menu_expand:checked ~[for="menu_expand"]:before {
  content: "\2716";
}
</style>
</head>
<body>
<main>
  <header>
    <h1>Menu au click sans javascript</h1>
    <nav data-role="navigation">
      <input id="menu_expand" type="checkbox">
      <label for="menu_expand">Menu</label>
      <ul class="">
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Actualités</a></li>
        <li><a href="#">Produits</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at laoreet diam. Nullam ut pharetra nibh, id facilisis nibh. Suspendisse luctus dolor id ante gravida volutpat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at laoreet diam. Nullam ut pharetra nibh, id facilisis nibh. Suspendisse luctus dolor id ante gravida volutpat.</p>  
</main>
</body>
</html>

**dadidodu85** · 28/06/2017, 13h19

Merci nosmoking, je regarde ça

**dadidodu85** · 30/06/2017, 13h13

Nickel nosmoking, je n'ai plus qu'a regarder comment décaler le texte sur la droite une fois le menu déroulant déplié. Merci

Menu déroulant au click pour le web mobile

CSS

Discussions similaires

Partager

Partager