Discussion :

[Casio]

Salutations,

Je suis en train de monter un petit menu déroulant de ci, de la, pour un site associatif.
J'arrive à bien tout bidouiller, si ce n'est que j'aimerai rajouter une temporisation au survol des sous-menus, afin que ceux-ci restent ouverts par ex. 0,5 sec.

Seconde question d'ailleurs, comme je constate que si on decollapse tous les sous-menus, on est offset de l'écran d'un mobile lambda, existe t'il, avec ce code, un moyen de fermer un sous-menu quand on en ouvre un autre (toujours en mode responsive bien sur) ?

Pour clore, comme je vais insérer ce menu dans un site qui a déjà des feuilles de styles, comment éviter qu'elles interfèrent ? Par exemple que les li ou ul de ce menu ne soient pas ceux définis dans le CSS du site et réciproquement ?

Voici les bouts de codes :

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
 
<!-- Partie incluse par le fichier menu-2020.php !-->
 
<div id="menu-2020">
 
	<nav>
		<div id="titremenu">
			<div id="sociaux">
				<!-- Media sociaux !-->
				(...)
			</div>
		</div>
		<div id="menus">
			<div id="barmenus">
				<label for="drop" class="toggle">&#x2630; Menu</label>
				<input type="checkbox" id="drop" />
				<ul class="topmenu">
					<li><a href="#">Accueil</a></li>
					<li> 
						<!-- Sous-menu 1 -->
						<label for="drop-1" class="toggle">Association &#x25BF;</label>
						<a href="#">Association</a>
						<input type="checkbox" id="drop-1"/>
						<ul>
							<li><a href="#">Service 1</a></li>
							<li><a href="#">Service 2</a></li>
							<li><a href="#">Service 3</a></li>
						</ul>
					</li>
					<li> 
						<!-- Sous-menu 2 -->
						<label for="drop-2" class="toggle">Collections &#x25BF;</label>
						<a href="#">Collections</a>
						<input type="checkbox" id="drop-2"/>
						<ul>
							<li><a href="#">Service 1</a></li>
							<li><a href="#">Service 2</a></li>
							<li><a href="#">Service 3</a></li>
						</ul>
					</li>
					<li> 
						<!-- Sous-menu 3 -->
						<label for="drop-3" class="toggle">Support &#x25BF;</label>
						<a href="#">Support</a>
						<input type="checkbox" id="drop-3"/>
						<ul>
							<li><a href="#">Service 1</a></li>
							<li><a href="#">Service 2</a></li>
							<li><a href="#">Service 3</a></li>
						</ul>
					</li>
					<li> 
						<!-- Sous-menu 4 -->
						<label for="drop-4" class="toggle">Services &#x25BF;</label>
						<a href="#">Services</a>
						<input type="checkbox" id="drop-4"/>
						<ul>
							<li><a href="#">Service 1</a></li>
							<li><a href="#">Service 2</a></li>
							<li><a href="#">Service 3</a></li>
						</ul>
					</li>
					<li><a href="#">Contact</a></li>
 
				<!--<li><!-- Sous-menu double -->
						<!--<li><label for="drop-5" class="toggle">ervices 0 &#x25BF;</label>
						<a href="#">Support</a>
						<input type="checkbox" id="drop-5"/>
						<ul>
							<li><a href="#">Service 1</a></li>
							<li>
								<!-- Second Tier Drop Down -->
								<!--<li><label for="drop-6" class="toggle">Services 1 &#x25BF;</label>
								<a href="#">Services</a>
								<input type="checkbox" id="drop-6"/>
								<ul>
									<li><a href="#">Service 1</a></li>
									<li><a href="#">Service 2</a></li>
									<li><a href="#">Service 3</a></li>
								</ul>
							</li>
						</ul>
					</li>!-->
 
				</ul>
			</div>
		</div>
	</nav>
 
</div>
 
<!-- Fin de partie incluse par le fichier menu-2020.php !-->

et :

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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
/*********** Menu 2020 ***********/
#menu-2020 {
	position: relative;
	width: auto;
	height: 30px;
	background-color: #FFFFFF; /* Fond de la barre globale */
}
 
.toggle, [id^=drop] {
	display: none;
}
 
nav {
	margin: 0px;
	padding: 0px;
	width: auto;
	height: 30px;
}
 
#titremenu {
	position: absolute;
	display: block;
	left: 0px;
	width: 250px;
	height: 30px;
}
 
#sociaux {
	display: inline-flex;
	height: 30px!important;
}
 
#sociaux a {
	padding: 0px 5px 0px 5px!important;
	height: 30px!important;
}
 
#sociaux span {
	vertical-align: middle;
}
 
#sociaux a:hover {
	background-color: #FFFFFF;
}
 
#menus {
	position: absolute;
	display: block;
	right: 0px;
	width: 700px;
	height: 30px;
}
 
#barmenus {
	height: 30px;
	border-left-style: solid; /* Border menus */
	border-left-color: #333333; /* Border menus */
	border-radius: 5px 0px 0px 5px; /* Arrondi menu */
	background-color: #333333; /* Fond bloc global menus */
}
 
nav:after {
	content: "";
	display: table;
	clear: both;
}
 
nav ul {
	float: right;
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}
 
nav ul li {
	margin: 0px;
	display: inline-block;
	float: left;
	background-color: #333333; /* Fond Menus */
}
 
nav a {
	display: block;
	padding: 0 15px;
	line-height: 30px;
	font-family: Verdana, Arial;
	-webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */
	color: #FFFFFF; /* Couleur liens */
	font-size: 15px;
	text-decoration: none;
	font-weight: none;
}
 
nav ul li ul li:hover { background: #FF8727; } /* Fond OnMouseOver sous-sous menus */
 
nav a:hover {
	background-color: #FF8727; /* Fond OnMouseOver menus */
	text-shadow: 2px 1px 1px #000000; /* Ombrage liens */
}
 
nav ul ul {
	display: none;
	position: absolute;
	top: 30px;
	border-bottom-style: solid; /* Border sous-menus */
	border-bottom-color: #555555; /* Border sous-menus */
	border-radius: 0px 0px 5px 5px; /* Arrondi sous-menus */
}
 
nav ul ul a {
	font-size: 70%; /* Taille liens sous-menus */
}
 
nav ul li:hover > ul { display: inherit; }
 
nav ul ul li {
	width: 170px;
	float: none;
	display: list-item;
	position: relative;
	background-color: #555555; /* Fond sous-menus */
}
 
nav ul ul ul li {
	position: relative;
	top: -30px;
	left: 170px;
}
 
li > a:after { content: ' \25BE'; } /* Fleche descendante pour sous-menus */
 
/* ul ul li > a:only-child:before { content: ''; } */
 
li > a:only-child:after { content: ''; } /* Retirer la fleche sur les liens seuls */
 
 
 
/* Media Queries
--------------------------------------------- */
 
@media all and (max-width : 999px) {
 
	#menu-2020 {
		height: 120px;
	}
 
	#titremenu {
		top: 0px;
		padding: 0px;
		width: 100%;
		height: 60px;
		text-align: right;
	}
 
	#sociaux {
		height: 60px!important;
	}
 
	#sociaux a {
		height: 60px!important;
	}
 
	#menus {
		right: initial; /* Reinit decalage menus */
		bottom: 0px;
		width: 100%; /* Largeur du bouton menu initial */
		height: 60px;
	}
 
	#barmenus {
		height: 60px;
		border: 0px;
		text-align: left;
	}
 
	nav { height: 120px; }
 
	.toggle + a, .topmenu { display: none; }
 
	.toggle {
		display: block;
		background-color: #333333;
		padding: 0px 20px;
		color: #FFF;
		font-size: 20px;
		line-height: 60px;
		text-decoration: none;
		border: none;
	}
 
	.toggle:hover { background-color: #FF8727; }
 
	[id^=drop]:checked + ul { display: block; }
 
	nav ul li {
		display: block;
		width: 100%;
	}
 
	nav a {
		line-height: 60px; /* Largeur de lignes des liens */
		font-size: 20px;
	}
 
	nav ul li a { padding-left: 20px; } /* Correctetion decalage liens menu */
 
	nav ul ul .toggle, nav ul ul a { padding: 0 40px; font-size: 15px } /* Liens sous-menus */
 
	nav ul ul ul a { padding: 0 80px; } /* Decalage liens sous-sous-menus */
 
	nav a:hover, nav ul ul ul a { background-color: #FF8727; }
 
	nav ul li ul li .toggle, nav ul ul a { background-color: #212121; } /* Fond sous-menus */
 
	nav ul ul {
		float: none;
		position: static;
		color: #ffffff;
	}
 
	nav ul ul li:hover > ul, nav ul li:hover > ul { display: none; }
 
	nav ul ul li {
		display: block;
		width: 100%;
	}
 
	nav ul ul ul li { position: static;	}
}

Pouvez-vous m'aider ?

Edit. : MaJ du code.

[Invité]

Bonjour,

essaie :

Code :

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

(...)

Voir aussi : CSS - transition-delay

[Casio]

Je ne vois pas la réponse, il n'y a que des "..."

[Invité]

Oui... comme dans TES codes... qu'on ne peut donc pas utiliser pour TESTER !

Code html :

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

<span>SURVOL</span>

Code css :

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

1
2
3
span { font-size:20px; }
span:hover { font-size:50px; }
span:not(:hover) { transition-delay: 3s; }

[Casio]

Oups, désolé, je pensais justement bien faire pour ne pas foutre du garbage partout, pensant que le peu de code vous suffirait à m'éclairer.

J'ai ré-édité mon post avec le full code HTML + CSS.

[Invité]

L'inconvénient, c'est que transition-delay ne va pas fonctionner avec display:block/none;.

Astuce :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
/* ------- */
/* SPECIAL */
/* Temporisation à la fermeture */
nav ul ul {
  display:block !important; 
  visibility: hidden;
  opacity: 0;
}
nav ul li:hover > ul {
  visibility: visible;
  opacity: 1;
}
nav ul li:not(:hover) > ul { transition-delay: 0.5s; }

A toi d'adapter aussi à la checkbox