-761 Removals
+309 Additions

Created by:phpboost

1/* -------------------------------------- 1/* --------------------------------------
2 cssmenu.css 2 cssmenu.css
3Contient les elements associes aux menus 3Contient les elements associes aux menus
4-----------------------------------------*/ 4-------------------------------------- */
5 5
6/* --- Module-mini --- */
7/* ------------------- */
8.cssmenu-content .module-mini-contents {
9 padding: 0;
10}
6 11
7/* -- Classes multi niveau -- */
8/* -------------------------- */
9 12
10/* --- Classes generales cssmenu --- */ 13/* -- Classes generales cssmenu -- */
14/* ------------------------------- */
11.cssmenu { 15.cssmenu {
12 font-size: 0; 16 font-size: 0;
13} 17}
14 18
15.cssmenu, 19.cssmenu,
16.cssmenu ul, 20.cssmenu ul,
17.cssmenu ul li, 21.cssmenu li {
18.cssmenu ul li .cssmenu-title {
19 position: relative; 22 position: relative;
20 margin: 0; 23 margin: 0;
21 list-style: none; 24 list-style: none;
22 line-height: 1; 25 line-height: normal;
23 left: auto; 26 left: auto;
24}
25
26.cssmenu { display: block; }
27header .cssmenu { display: inline-block; }
28
29@media (min-width: 769px) {
30 #sub-header-content .cssmenu {
31 height: 43px;
32 }
33}
34
35.cssmenu ul,
36.cssmenu ul li,
37.cssmenu ul li .cssmenu-title {
38 display: block; 27 display: block;
39} 28}
40 29
41.cssmenu:after, 30.cssmenu:after,
42.cssmenu > ul:after { 31.cssmenu > ul:after {
43 display: block; 32 display: block;
44 visibility: hidden; 33 visibility: hidden;
45 height: 0; 34 height: 0;
46 content: ""; 35 content: "";
47 line-height: 0; 36 line-height: 0;
48 clear: both; 37 clear: both;
49} 38}
50 39
51.cssmenu-img { 40.cssmenu-img {
52 display: inline-block; 41 display: none;
53}
54
55@media (max-width: 768px) {
56 .cssmenu > .cssmenu-img {
57 display: none;
58 }
59
60 .cssmenu-img {
61 padding: 0px 5px 0px 0px;
62 }
63} 42}
64 43
65@media (min-width: 769px) { 44@media (min-width: 769px) {
66 .cssmenu-img { 45 .cssmenu-img {
67 padding: 10px 0 0 5px; 46 display: inline-block;
68 vertical-align: top; 47 margin-left: 1.309rem;
69 } 48 }
70}
71 49
72.cssmenu-img-level-0 ~ ul.level-0 { 50 .cssmenu .menu-with-img {
73 display: inline-block; 51 display: inline-block;
74}
75
76.close {
77 left: -9999px !important;
78 height: 0;
79 overflow: hidden;
80}
81
82#menu-left .cssmenu { margin-right: -9px; }
83#menu-right .cssmenu { margin-left: -9px; }
84
85#menu-left .cssmenu.small-screen { margin-right: 0; }
86#menu-right .cssmenu.small-screen { margin-left: 0; }
87
88.cssmenu li:hover > .cssmenu-title {
89 text-decoration: none;
90}
91
92.cssmenu .cssmenu-title img {
93 margin: 0 5px 0 0;
94 vertical-align: bottom;
95}
96
97.cssmenu.small-screen {
98 width: 100%;
99}
100
101.cssmenu.small-screen ul {
102 display: block;
103 width: 100%;
104}
105
106.cssmenu.small-screen ul li {
107 width: 100%;
108 border-top: 1px solid rgba(120, 120, 120, 0.2);
109}
110
111.cssmenu.small-screen > ul > li:last-child.has-sub {
112 border-bottom: 1px solid rgba(120, 120, 120, 0.2);
113}
114
115.cssmenu.small-screen ul ul li,
116.cssmenu.small-screen li:hover > ul > li {
117 height: auto;
118}
119
120.cssmenu.small-screen ul li .cssmenu-title,
121.cssmenu.small-screen ul ul li .cssmenu-title {
122 padding: 17px;
123 width: 100%;
124 border-bottom: 0;
125}
126
127.cssmenu.small-screen ul ul li .cssmenu-title {
128 padding: 11px;
129}
130
131@media (max-width: 768px) {
132 .cssmenu.small-screen .cssmenu-img-level-0 + div {
133 padding: 10px 40px 5px 17px;
134 } 52 }
135}
136 53
137/* --- Variante cssmenu-horizontal --- */ 54 .module-mini-top img {
138#main .cssmenu-horizontal {} 55 margin: 0 0.309em 0 0;
139 56 }
140/* --- Variante cssmenu-group --- */
141div.cssmenu-group {
142 position: relative;
143 display: inline-block;
144 padding: 2px 8px;
145 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%,rgba(56, 56, 56, 0.18) 100%);
146 background-color: #FFFFFF;
147 border: 1px solid #999999;
148 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 rgba(0, 0, 0, 0.25);
149 color: #444444;
150 cursor: pointer;
151} 57}
152 58
153div.cssmenu-group .cssmenu-title { 59.cssmenu li:hover > .cssmenu-title {
154 color: #444444;
155 font-size: 1.2rem;
156 font-weight: 300;
157 text-decoration: none; 60 text-decoration: none;
158} 61}
159 62
160.cssmenu-group.small-screen { 63.cssmenu-title {
161 margin: 0 0 5px 0; 64 padding: 0.456em 1.618em 0.456em 0.618em;
162} 65 font-size: 1.482rem;
163 66 white-space: normal;
164/* --- Variante cssmenu-actionslinks --- */ 67 font-weight: 400;
165.cssmenu-actionslinks {
166 margin: 0 0 20px 0;
167}
168
169.cssmenu-actionslinks {
170 float: right;
171 margin: 0 5px 5px 5px;
172}
173
174.cssmenu-actionslinks.small-screen {
175 float: none;
176 margin: 0;
177}
178
179.cssmenu.cssmenu-actionslinks ul li .cssmenu-title,
180.cssmenu.cssmenu-actionslinks ul li ul li .cssmenu-title {
181 padding: 5px;
182 border: none;
183 font-weight: normal;
184 font-size: 11px;
185}
186
187.cssmenu-actionslinks.small-screen ul li {
188 border: none;
189}
190
191.cssmenu.cssmenu-actionslinks.small-screen ul li .cssmenu-title,
192.cssmenu.cssmenu-actionslinks.small-screen ul li ul li .cssmenu-title {
193 padding: 15px 5px;
194 cursor: pointer;
195}
196
197/* --- Autres variantes --- */
198@media (min-width: 769px) {
199 #cssmenu-galleryfilter ul {
200 min-width: 130px;
201 }
202}
203
204.cssmenu.cssmenu-static li.has-sub > .cssmenu-title:after,
205.cssmenu.cssmenu-static li.has-sub > .cssmenu-title:before {
206 display: none;
207}
208
209
210/* -- Classes Niveau 1 -- */
211/* ---------------------- */
212
213/* --- Classes generales cssmenu --- */
214.cssmenu > ul > li {
215 float: left;
216}
217
218#sub-header .cssmenu-horizontal > ul > li {
219 position: relative;
220 border-right: 1px solid #444444;
221}
222
223#sub-header .cssmenu-horizontal > ul > li:after {
224 position:absolute;
225 right: 1%;
226 top: 50px;
227 height: 100%;
228 width: 1px;
229 border-right: 1px solid #333333;
230}
231
232
233#main .cssmenu-horizontal > ul > li:last-child,
234#sub-header .cssmenu-horizontal > ul > li:last-child {
235 border-bottom: none;
236}
237
238#main .cssmenu-horizontal > ul > li:last-child:after,
239#sub-header .cssmenu-horizontal > ul > li:last-child:after {
240 width: 0;
241 height: 0;
242}
243
244#main .cssmenu-horizontal > ul > li {
245 position: relative;
246 border-right: 1px solid #EFEFEF;
247}
248
249#main .cssmenu-horizontal > ul > li:last-child {
250 border-right: none;
251}
252
253#main .cssmenu-horizontal.small-screen > ul > li {
254 border-right: none;
255}
256
257#main .cssmenu-horizontal > ul > li:after {
258 position:absolute;
259 right: 1%;
260 top: 50px;
261 height: 100%;
262 width: 1px;
263 border-right: 1px solid #EEEEEE;
264}
265
266.cssmenu-left > ul > li,
267.cssmenu-right > ul > li {
268 float: none;
269 text-align: left; 68 text-align: left;
270}
271
272.cssmenu > ul > li > .cssmenu-title {
273 padding: 17px;
274 font-size: 12px;
275 font-weight: 700;
276 letter-spacing: 1px;
277}
278
279/* --- Indicateur de sous menu --- */
280.cssmenu > ul > li.has-sub > .cssmenu-title {
281 padding-right: 30px;
282}
283
284.cssmenu > ul > li.has-sub > .cssmenu-title:after,
285.cssmenu > ul > li.has-sub > .cssmenu-title:before {
286 position: absolute;
287 display: block; 69 display: block;
288 content: '';
289}
290
291.cssmenu > ul > li.has-sub > .cssmenu-title:after {
292 width: 8px;
293 height: 2px;
294}
295
296.cssmenu > ul > li.has-sub > .cssmenu-title:before {
297 width: 2px;
298 height: 8px;
299 transition: all 0.25s ease;
300}
301
302.cssmenu > ul > li.has-sub:hover > .cssmenu-title:before {
303 height: 0;
304}
305
306.cssmenu-vertical > ul > li > .cssmenu-title {
307 padding: 8px 20px 8px 10px;
308} 70}
309 71
310@media (min-width: 769px) { 72@media (min-width: 769px) {
73 .cssmenu-title {
74 white-space: nowrap;
75 }
311 .cssmenu-vertical > ul > li > .cssmenu-title { 76 .cssmenu-vertical > ul > li > .cssmenu-title {
312 padding: 6px 20px 6px 10px; 77 white-space: normal;
313 } 78 }
314} 79}
315 80
316.cssmenu > ul > li.has-sub > .cssmenu-title:after { top: 22px; right: 11px; } 81.cssmenu-title img {
317.cssmenu > ul > li.has-sub > .cssmenu-title:before { top: 19px; right: 14px; } 82 display: inline-block;
318.cssmenu > ul > li.has-sub:hover > .cssmenu-title:before { top: 23px; } 83 margin-right: 0.1618em;
319
320@media (min-width: 769px) {
321 .cssmenu-vertical > ul > li.has-sub > .cssmenu-title:after { top: 11px; }
322 .cssmenu-vertical > ul > li.has-sub > .cssmenu-title:before { top: 8px; }
323} 84}
324 85
325/* --- Position des sous menu --- */
326.cssmenu li:hover > ul { left: auto ; }
327aside .cssmenu-left li:hover > ul { left: 100% ; top: 0; }
328aside .cssmenu-right li:hover > ul { right: 100%; top: 0; }
329aside .cssmenu-left.cssmenu-static li:hover > ul { left: 0; top: 0; }
330aside .cssmenu-right.cssmenu-static li:hover > ul { right: 0; top: 0; }
331.cssmenu.cssmenu-actionslinks li:hover > ul { right: 0; top: 100%; }
332.cssmenu.cssmenu-actionslinks ul li:hover > ul { right: 100%; top: 0; }
333.cssmenu.small-screen li:hover > ul { left: 0; }
334.cssmenu.cssmenu-right.small-screen li:hover > ul { right: 0; }
335.cssmenu.cssmenu-left.small-screen li:hover > ul { left: 0; }
336 86
337/* --- Variante cssmenu-group --- */ 87/* -- Classes Items -- */
338.cssmenu-group > ul { 88/* --------------------*/
339 text-align: center; 89.cssmenu-horizontal > ul > li {
340 font-size: 0;
341}
342
343.cssmenu-group > ul > li {
344 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%,rgba(56, 56, 56, 0.18) 100%);
345 background-color: #FFFFFF;
346 border: 1px solid #999999;
347 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 rgba(0, 0, 0, 0.25);
348 color: #444444;
349 cursor: pointer;
350}
351
352.cssmenu.cssmenu-group > ul > li {
353 display: inline-block; 90 display: inline-block;
354 float: none; 91 vertical-align: middle;
355}
356
357.cssmenu.cssmenu-group > ul > li:hover {
358 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 40%,rgba(56, 56, 56, 0.18) 100%);
359 background-color: #F0F0F0;
360 border-bottom-color: #B3B3B3;
361}
362
363.cssmenu-group > ul > li:first-child {
364 border-left: 1px solid rgba(0, 0, 0, 0.1);
365}
366
367.cssmenu-group > ul > li:last-child {
368 border-right: 1px solid rgba(0, 0, 0, 0.1);
369}
370
371.cssmenu-group > ul > li.current {
372 background-image: linear-gradient(to top, rgba(255, 255, 255, 0.18) 0%,rgba(56, 56, 56, 0.18) 100%);
373 background-color: #F0F0F0;
374 border-top-color: #B3B3B3;
375} 92}
376 93
377.cssmenu.cssmenu-group > ul > li > .cssmenu-title { 94.cssmenu-vertical li,
378 padding: 4px 12px; 95.cssmenu-actionslinks li {
379 color: #444444; 96 display: block;
380 font-size: 1.1rem;
381 font-weight: 300;
382 text-decoration: none;
383} 97}
384 98
385.cssmenu-group.small-screen > ul.open { 99/* --- Indicateur de sous menu --- */
386 display: table !important; 100.cssmenu-horizontal > ul > li >.cssmenu-title {
387 margin: auto; 101 padding: 0.618em 1.618em 0.618em 0.618em;
388 width: auto;
389} 102}
390 103
391.cssmenu-group.small-screen > ul > li, 104.cssmenu-right li.has-sub > .cssmenu-title {
392.cssmenu-group.small-screen > ul > li:hover { 105 padding-left: 1.618em;
393 float: left;
394 width: auto;
395 background: transparent;
396 border: none;
397 clear: both;
398} 106}
399 107
400.cssmenu.cssmenu-group.small-screen > ul > li > .cssmenu-title { 108.cssmenu ul li.has-sub > .cssmenu-title:after,
401 padding: 10px 12px; 109.cssmenu-right ul li.has-sub > .cssmenu-title:before {
110 position: absolute;
111 display: inline-block;
112 content: '';
113 font-family: 'Font Awesome 5 Free';
114 font-weight: 900;
115 font-size: 1rem;
116 top: 50%;
117 transform: translateY(-40%);
402} 118}
403 119
404/* --- Variante cssmenu-actionslinks --- */ 120.cssmenu ul li.has-sub > .cssmenu-title:after {
405.cssmenu-actionslinks.small-screen > ul > li:last-child { 121 right: 1em;
406 padding: 0 0 10px 0; 122 content: '\f067';
407 border-bottom: 1px solid rgba(120, 120, 120, 0.2); 123 transition: 0.2s;
408} 124}
409 125
410.cssmenu.cssmenu-static li > .cssmenu-title { 126.cssmenu-right ul li.has-sub > .cssmenu-title:after {
411 border: none; 127 content: '';
412} 128}
413 129
414.cssmenu.cssmenu-static > ul > li > .cssmenu-title { 130.cssmenu-right ul li.has-sub > .cssmenu-title:before {
415 text-align: center; 131 left: 1em;
132 content: '\f067';
416} 133}
417 134
418/* --- Variante cssmenu-static --- */ 135.cssmenu ul li.has-sub:hover > .cssmenu-title:after {
419.cssmenu.cssmenu-static > ul > li { 136 content: '\f068';
420 padding: 0 10px 0 10px; 137 transition: 0.2s;
421} 138}
422 139
423footer .cssmenu.cssmenu-static > ul > li { border-right: 1px solid #2A2A2A; } 140.cssmenu-right ul li.has-sub:hover > .cssmenu-title:after {
424#top-footer .cssmenu.cssmenu-static > ul > li { border-right: 1px solid #DDDDDD; } 141 content: '';
425
426footer .cssmenu.cssmenu-static > ul > li:last-child,
427#top-footer .cssmenu.cssmenu-static > ul > li:last-child {
428 border-right: none;
429} 142}
430 143
431.cssmenu.cssmenu-static > ul > li > .cssmenu-title { 144.cssmenu-right ul li.has-sub:hover > .cssmenu-title:before {
432 margin: 0 0 20px 0; 145 content: '\f068';
433 padding-bottom: 5px;
434 border-bottom: 1px solid #25466C;
435 font-size: 17px;
436 font-weight: bold;
437} 146}
438 147
439 148/* --- Position des sous menu --- */
440/* -- Classes Niveau 2 -- */
441/* ---------------------- */
442
443/* --- Classes generales cssmenu --- */
444.cssmenu ul ul { 149.cssmenu ul ul {
445 position: absolute; 150 position: absolute;
446 left: -9999px; 151 left: -9999px;
447 z-index: 10; 152 z-index: 10;
448} 153}
449 154
450.cssmenu ul ul li { 155.cssmenu li:hover > ul { left: auto ; }
451 height: 0; 156.cssmenu-horizontal li:hover > ul { left: 0; top: 100%; }
452 transition: all 0.25s ease; 157.cssmenu-horizontal ul ul li:hover > ul,
453} 158.cssmenu-left li:hover > ul { left: 100% ; top: 0; }
159.cssmenu-right li:hover > ul { right: 100%; top: 0; }
160.cssmenu-left.cssmenu-static li:hover > ul { left: 0; top: 0; }
161.cssmenu-right.cssmenu-static li:hover > ul { right: 0; top: 0; }
162.cssmenu-actionslinks li:hover > ul { right: 0; top: 100%; }
163.cssmenu-actionslinks ul li:hover > ul { right: 100%; top: 0; }
164.cssmenu ul ul ul { top: 0; }
454 165
455.cssmenu li:hover > ul > li { 166.small-screen li:hover > ul { left: 0; }
456 height: auto; 167.cssmenu-right.small-screen li:hover > ul { right: 0; }
457 vertical-align: middle; 168.cssmenu-left.small-screen li:hover > ul { left: 0; }
458}
459
460.cssmenu ul ul ul {
461 top: 0;
462}
463
464.cssmenu ul ul li .cssmenu-title {
465 padding: 11px 15px;
466 font-size: 12px;
467}
468
469.cssmenu ul ul li .cssmenu-title {
470 padding: 8px 20px 8px 10px;
471 border-bottom: 1px solid rgba(150, 150, 150, 0.15);
472 white-space: nowrap;
473}
474 169
475@media (min-width: 769px) { 170/* --- Decommenter pour déplier le dernier item de rang 1 vers la gauche pour un menu horizontal --- */
476 .cssmenu ul ul li .cssmenu-title { 171/*
477 padding: 6px 20px 6px 10px; 172.cssmenu-horizontal > ul > li:hover:last-child > ul {
478 } 173 left: auto;
174 right: 0;
479} 175}
480 176
481/* --- Indicateur de sous menu --- */ 177.cssmenu-horizontal > ul > li:hover:last-child > ul li:hover > ul {
482.cssmenu ul ul li:last-child > .cssmenu-title, 178 left: auto;
483.cssmenu ul ul li.last-item > .cssmenu-title { 179 right: 100%;
484 border-bottom: 0;
485} 180}
181*/
486 182
487.cssmenu ul ul li.has-sub > .cssmenu-title:after, 183/* -- Small screens - change the viewprot limit in /templates/default/framework/menus/link.tpl -- */
488.cssmenu ul ul li.has-sub > .cssmenu-title:before { 184/* ---------------------------------------------------------------------------------------------- */
489 position: absolute; 185.small-screen,
186.small-screen ul,
187.small-screen ul li {
490 display: block; 188 display: block;
491 content: ''; 189 width: 100%;
492}
493
494.cssmenu ul ul li.has-sub > .cssmenu-title:after {
495 width: 8px;
496 height: 2px;
497} 190}
498 191
499.cssmenu ul ul li.has-sub > .cssmenu-title:before { 192.cssmenu-actionslinks.small-screen ul {
500 width: 2px; 193 top: 100%;
501 height: 8px;
502 transition: all .25s ease;
503}
504
505.cssmenu ul ul li.has-sub > .cssmenu-title:after { top: 13px; right: 11px; }
506.cssmenu ul ul li.has-sub > .cssmenu-title:before { top: 10px; right: 14px; }
507
508@media (min-width: 769px) {
509 .cssmenu.cssmenu-vertical ul ul li.has-sub > .cssmenu-title:after { top: 11px; right: 11px; }
510 .cssmenu.cssmenu-vertical ul ul li.has-sub > .cssmenu-title:before { top: 8px; right: 14px; }
511}
512
513.cssmenu ul ul > li.has-sub:hover > .cssmenu-title:before {
514 top: 17px;
515 height: 0;
516}
517
518.cssmenu.small-screen ul ul li.has-sub > .cssmenu-title:after,
519.cssmenu.small-screen ul ul li.has-sub > .cssmenu-title:before {
520 display: none;
521}
522
523.cssmenu.small-screen ul.level-1 li .cssmenu-title {
524 padding-left: 25px;
525}
526
527.cssmenu.small-screen ul.level-2 li .cssmenu-title,
528.cssmenu.cssmenu-actionslinks.small-screen ul li ul li ul li .cssmenu-title {
529 padding-left: 35px;
530}
531
532.cssmenu.small-screen ul.level-3 li .cssmenu-title {
533 padding-left: 45px;
534}
535
536.cssmenu.small-screen ul.level-4 li .cssmenu-title {
537 padding-left: 55px;
538}
539
540.cssmenu.small-screen ul ul li .cssmenu-title {
541 background: none;
542} 194}
543 195
544.cssmenu.small-screen ul ul, 196.cssmenu.small-screen ul ul,
545.cssmenu.small-screen ul ul ul { 197.small-screen ul ul ul {
546 position: relative; 198 position: relative;
199 top: 0;
547 left: 0; 200 left: 0;
548 width: 100%; 201 width: 100%;
549 margin: 0; 202 margin: 0;
550 border: none; 203 border: none;
551 text-align: left;
552} 204}
553 205
554/* --- Variantes --- */ 206.cssmenu.small-screen ul ul,
555.cssmenu-horizontal ul ul ul { 207.small-screen ul ul ul,
556 margin-left: 100%; 208.cssmenu-vertical.small-screen .cssmenu-title {
209 text-align: left;
557} 210}
558 211
559.cssmenu-vertical ul ul { 212.cssmenu-horizontal.small-screen ul ul li:hover > ul,
560 position: relative; 213.cssmenu-left.small-screen li:hover > ul {
214 top: 0;
215 left: 0;
561} 216}
562 217
563aside .cssmenu-vertical ul ul { 218.close {
564 position: absolute; 219 left: -9999px !important;
565 margin-top: -1px; 220 height: 0;
566 border: 1px solid #BEBEBE; 221 overflow: hidden;
567} 222}
568 223
569header .cssmenu-vertical ul ul li .cssmenu-title, 224.small-screen ul li .cssmenu-title,
570#main .cssmenu-vertical ul ul li .cssmenu-title { 225.small-screen ul ul li .cssmenu-title,
571 padding: 5px 15px; 226.cssmenu-actionslinks.small-screen ul li .cssmenu-title {
227 padding: 0.309em 0.618em;
572 width: 100%; 228 width: 100%;
573 border-bottom: none;
574} 229}
575 230
576.cssmenu-static ul ul { 231.small-screen ul ul li .cssmenu-title {
577 position: relative; 232 padding-left: 1em;
578 left: 0;
579 z-index: 0;
580} 233}
581 234
582.cssmenu-static ul ul li { 235.small-screen ul ul ul li .cssmenu-title,
583 height: auto; 236.cssmenu-actionslinks.small-screen ul li ul li ul li .cssmenu-title {
237 padding-left: 1.618em;
584} 238}
585 239
586.cssmenu-static ul ul ul { 240.small-screen ul ul ul ul li .cssmenu-title {
587 margin-left: 0; 241 padding-left: 2em;
588} 242}
589 243
590.cssmenu.cssmenu-static ul ul > li > .cssmenu-title { 244.small-screen ul ul ul ul ul li .cssmenu-title {
591 padding-left: 10px; 245 padding-left: 2.618em;
592} 246}
593 247
594.cssmenu.cssmenu-static ul ul ul > li > .cssmenu-title { 248/* --- Responsive button --- */
595 padding-left: 20px; 249.menu-button {
250 display: none;
251 position: relative;
252 font-size: 1.482rem;
596} 253}
597 254
598.cssmenu-actionslinks ul li.has-sub .cssmenu-title:after { top: 9px; } 255.small-screen .menu-button,
599.cssmenu-actionslinks ul li.has-sub .cssmenu-title:before { top: 6px; } 256.cssmenu-actionslinks .menu-button {
600 257 display: block;
601 258 padding: 0.618em 1.618em 0.618em 0.618em;
602/* -- Personnalisation graphique -- */ 259 text-transform: uppercase;
603/* -------------------------------- */ 260 font-weight: 400;
604 261 cursor: pointer;
605/* --- Niveau 1 --- */ 262 font-size: 1.309rem;
606#top-header .cssmenu > ul > li > .cssmenu-title { color: #444444; } 263 text-align: left;
607#sub-header .cssmenu > ul > li > .cssmenu-title { color: #DDDDDD; }
608.cssmenu.cssmenu-vertical > ul > li > .cssmenu-title { color: #444444; }
609#main .cssmenu > ul > li > .cssmenu-title { color: #444444; }
610.cssmenu-actionslinks > ul > li > .cssmenu-title { color: #666666; }
611footer .cssmenu-static > ul > li > .cssmenu-title { color: #DDDDDD; }
612#top-footer .cssmenu-static > ul > li > .cssmenu-title { color: #444444; }
613
614#top-header .cssmenu > ul > li:hover > .cssmenu-title { color: #FFFFFF; }
615header .cssmenu li:hover > .cssmenu-title { color: #FFFFFF; }
616.cssmenu.cssmenu-vertical li:hover > .cssmenu-title { color: #666666; }
617#main .cssmenu li:hover > .cssmenu-title { color: #666666; }
618
619@media (min-width: 769px) {
620 header .cssmenu-horizontal > ul > li:hover { background-color: #333333; }
621 #main .cssmenu-horizontal > ul > li:hover { background-color: #F1F1F1; }
622} 264}
623 265
624/* --- Niveau 2 --- */ 266.small-screen .menu-button:after {
625.cssmenu ul ul li .cssmenu-title { color: #DDDDDD; } 267 position: absolute;
626#main .cssmenu ul ul li .cssmenu-title { color: #333333; } 268 padding: 0.618em;
627.cssmenu.cssmenu-vertical ul ul li .cssmenu-title { color: #333333; } 269 display: inline-block;
628.cssmenu-actionslinks li ul li .cssmenu-title { color: #666666; } 270 content: '\f0c9';
629aside .cssmenu-static li ul li .cssmenu-title, 271 font-family: 'Font Awesome 5 Free';
630#top-footer .cssmenu-static li ul li .cssmenu-title { color: #666666; } 272 font-weight: 900;
273 font-size: 1.482rem;
274 right: 0;
275 top: 0;
276}
631 277
632.cssmenu ul ul li:hover > .cssmenu-title { color: #333333; } 278.small-screen .menu-button.menu-opened:after {
633header .cssmenu ul ul li:hover > .cssmenu-title { color: #FFFFFF; } 279 content: '\f00d';
634#main .cssmenu ul ul li:hover > .cssmenu-title { color: #555555; } 280}
635.cssmenu.cssmenu-vertical ul ul li:hover > .cssmenu-title { color: #555555; }
636.cssmenu-actionslinks li:hover > .cssmenu-title { color: #333333; }
637footer .cssmenu-static ul ul li:hover > .cssmenu-title { color: #FFFFFF; }
638#top-footer .cssmenu-static ul ul li:hover > .cssmenu-title { color: #262626; }
639
640.cssmenu.cssmenu-vertical ul ul li .cssmenu-title { background-color: #FFFFFF; }
641
642.cssmenu-actionslinks ul li:hover > .cssmenu-title:after { background-color: #333333; }
643 281
644header .cssmenu ul ul li .cssmenu-title { background-color: #333333; } 282/* --- Responsive submenu button --- */
645.cssmenu-actionslinks li:hover > .cssmenu-title { background-color: #DDDDDD; } 283.cssmenu.small-screen ul li.has-sub > .cssmenu-title:after,
646.cssmenu-actionslinks.small-screen li:hover > .cssmenu-title { background-color: transparent;} 284.cssmenu-right.small-screen ul li.has-sub > .cssmenu-title:before {
647#main .cssmenu-horizontal ul ul { background-color: #F9F9F9; }
648#main .cssmenu-horizontal ul ul > li:hover { background-color: #F1F1F1; }
649#cssmenu-galleryfilter ul ul li .cssmenu-title { background-color: #FFFFFF; }
650#cssmenu-galleryfilter ul ul li:hover .cssmenu-title { background-color: #DDDDDD; }
651
652/* --- Personnalisation de l'indicateur de sous-Menu --- */
653.cssmenu li.has-sub > .cssmenu-title:after,
654.cssmenu li.has-sub > .cssmenu-title:before { background-color: #DDDDDD; }
655
656.cssmenu-vertical li.has-sub > .cssmenu-title:after,
657.cssmenu-vertical li.has-sub > .cssmenu-title:before { background-color: #444444; }
658
659
660/* -- Bouton responsive -- */
661/* ----------------------- */
662
663/* --- Classes generales cssmenu --- */
664.cssmenu .menu-button {
665 display: none; 285 display: none;
666 position: relative;
667 list-style: none;
668 line-height: 1;
669 font-size: 1.2rem;
670} 286}
671 287
672.cssmenu .menu-button:before { 288.small-screen .submenu-button {
673 font-size: 1.3rem; 289 position: absolute;
674} 290 z-index: 99;
675 291 right: 0;
676.cssmenu.small-screen .menu-button { 292 top: 0;
677 display: block; 293 display: block;
678 padding: 17px 40px 17px 17px;
679 text-transform: uppercase;
680 font-weight: 700;
681 cursor: pointer; 294 cursor: pointer;
682} 295}
683 296
684#top-footer .cssmenu.small-screen .menu-button { 297.small-screen .submenu-button:after {
685 color: #444444;
686}
687
688.cssmenu.small-screen .menu-button:after,
689.cssmenu.small-screen .menu-button:before {
690 position: absolute; 298 position: absolute;
691 display: block; 299 display: block;
692 content: ''; 300 content: '\f0d7';
301 font-family: 'Font Awesome 5 Free';
302 font-weight: 900;
303 font-size: 1.482rem;
304 right: 0;
305 top: 0;
306 padding: 0.618em;
693} 307}
694 308
695.cssmenu.small-screen .menu-button:after { 309.small-screen ul ul .submenu-button:after {
696 height: 4px; 310 top: 0.309em;
697 width: 20px; 311 font-size: 1.306rem;
698 border-width: 2px 0 2px 0; 312 padding: 0.456em;
699 border-style: solid;
700} 313}
701 314
702.cssmenu.small-screen .menu-button:before { 315.small-screen .submenu-button.submenu-opened:after { content: '\f0d8'}
703 height: 2px; 316
704 width: 20px; 317
705 background-color: #DDDDDD; 318/* -- Cssmenu-actionslinks variant -- */
706 font-size: 1.3rem; 319/* ---------------------------------- */
320.cssmenu-actionslinks {
321 float: right;
322 margin: 0.809rem 0.809rem 2.809rem 3.618rem;
707} 323}
708 324
709.cssmenu.small-screen .menu-button.menu-opened:after { 325.cssmenu-actionslinks .menu-button {
710 height: 2px; 326 display: block;
711 border: 0;
712 transform: rotate(45deg);
713} 327}
714 328
715.cssmenu.small-screen .menu-button.menu-opened:before { 329.cssmenu-actionslinks .menu-button:after {
716 transform: rotate(-45deg); 330 position: absolute;
331 display: block;
332 font-family: 'Font Awesome 5 Free';
333 font-weight: 900;
334 font-size: 1.482rem;
335 content: "\f013";
336 top: 0;
337 right: 0;
338 padding: 0.228em 0.618em;
339 border-width: 1px;
340 border-style: solid;
341 border-color: transparent;
717} 342}
718 343
719/* --- Position du bouton --- */ 344.cssmenu-actionslinks:hover .menu-button:after {
720.cssmenu.small-screen .menu-button:after { top: 22px; right: 17px; } 345 border-bottom-width: 0;
721.cssmenu.small-screen .menu-button:before { top: 16px; right: 17px; } 346}
722.cssmenu.small-screen .menu-button.menu-opened:after,
723.cssmenu.small-screen .menu-button.menu-opened:before { top: 23px; width: 15px; }
724 347
725/* --- Variante cssmenu-actionslinks --- */ 348.cssmenu-actionslinks ul {
726.cssmenu .menu-button:before { 349 position: absolute;
727 font-size: 1.3rem; 350 z-index: 10;
351 top: 2.309rem;
352 min-width: 200px;
353 left: -9999px;
728} 354}
729 355
730.cssmenu-actionslinks .menu-button { 356.cssmenu-actionslinks .menu-button:hover + ul,
731 float: right; 357.cssmenu-actionslinks .menu-button + ul:hover {
732 position: relative; 358 left: auto;
733 display: inline-block; 359 right: -1px;
734 padding: 4px 12px 4px 12px;
735 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%,rgba(56,56, 56, 0.1) 100%);
736 background-color: #FFFFFF;
737 border: 1px solid #999999;
738 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 rgba(0, 0, 0, 0.25);
739 font-family: FontAwesome;
740 font-style: normal;
741 font-weight: normal;
742 line-height: 1;
743 color: #444444;
744 text-align: center;
745 cursor: pointer;
746 -webkit-font-smoothing: antialiased;
747} 360}
748 361
749@media (min-width: 769px) { 362@media (min-width: 769px) {
750 .cssmenu-actionslinks .menu-button { 363 .cssmenu-actionslinks .menu-button {
751 font-size: 0; 364 font-size: 0;
752 } 365 z-index: 9;
753
754 .cssmenu-actionslinks:hover .menu-button {
755 z-index: 11;
756 margin-bottom: 1px;
757 background-image: none;
758 border-width: 1px 1px 0 1px;
759 border-color: #AAAAAA;
760 } 366 }
761
762} 367}
763 368
764#main .cssmenu-actionslinks.small-screen .menu-button { 369/* --- Cssmenu-actionslinks small-screen variant --- */
370.cssmenu-actionslinks.small-screen {
371 margin: 0;
765 float: none; 372 float: none;
766 background-color: transparent;
767 background-image: none;
768 border: none;
769 font-family: "Trebuchet MS",Verdana,"Bitstream Vera Sans",Times,serif;
770 text-align: left;
771} 373}
772 374
773.cssmenu-actionslinks .menu-button + ul { 375.cssmenu-actionslinks.small-screen .menu-button:after {
774 left: -9999px; 376 content: '\f0c9';
377 border-width: 0;
378 padding: 0.618em;
775} 379}
776 380
777.cssmenu-actionslinks .menu-button:hover + ul, 381.cssmenu-actionslinks.small-screen .menu-button.menu-opened:after {
778.cssmenu-actionslinks .menu-button + ul:hover{ 382 content: '\f00d';
779 left: auto;
780} 383}
781 384
782.cssmenu-actionslinks.small-screen .menu-button:hover + ul, 385.cssmenu-actionslinks.small-screen .menu-button:hover + ul,
783.cssmenu-actionslinks.small-screen .menu-button + ul:hover { 386.cssmenu-actionslinks.small-screen .menu-button + ul:hover {
784 left: -9999px; 387 left: -9999px;
388 right: 0;
785} 389}
786 390
787.cssmenu-actionslinks.small-screen .menu-button + ul.open, 391.cssmenu-actionslinks.small-screen .menu-button + ul.open,
788.cssmenu-actionslinks.small-screen .menu-button + ul:hover.open { 392.cssmenu-actionslinks.small-screen .menu-button + ul:hover.open {
789 left: auto; 393 left: auto;
790} 394 position: relative;
791 395 width: 100%;
792.cssmenu-actionslinks .menu-button:before {
793 content: "\f013";
794}
795
796.cssmenu-tools .menu-button:before {
797 content: "\f0c9";
798} 396}
799 397
800.cssmenu-actionslinks ul { 398.cssmenu-actionslinks.small-screen.cssmenu-right .cssmenu-title {
801 position: absolute; 399 text-align: left;
802 z-index: 10;
803 right: 0;
804 top: 21px;
805 padding: 5px 0;
806 width: 170px;
807 background-color: #FFFFFF;
808 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
809 border: 1px solid #AAAAAA;
810 font-size: 11px;
811} 400}
812 401
813.cssmenu-actionslinks.small-screen ul { 402.cssmenu-actionslinks.small-screen ul ul .cssmenu-title {
814 top: 100%; 403 padding-left: 0.618em;
815 border: none;
816 box-shadow: 0 0 0 rgba(0, 0, 0, 0);
817} 404}
818 405
819.cssmenu-actionslinks.small-screen li.has-sub > a, 406.cssmenu-actionslinks.small-screen ul li.has-sub > .submenu-button,
820.cssmenu-actionslinks.small-screen li.has-sub > .submenu-button { 407.cssmenu-actionslinks.small-screen ul li.has-sub > .cssmenu-title {
821 display: none; 408 display: none;
822} 409}
823 410
824.cssmenu-actionslinks.small-screen li.has-sub > ul { 411
825 display: block !important; 412/* -- Cssmenu-tools variant small-screen -- */
826 padding: 0; 413/* ---------------------------------------- */
414.cssmenu-tools.small-screen {
415 height: auto;
827} 416}
828 417
829/* --- Variante tools --- */
830.cssmenu-tools.small-screen li.has-sub > a, 418.cssmenu-tools.small-screen li.has-sub > a,
831.cssmenu-tools.small-screen li.has-sub > .submenu-button { 419.cssmenu-tools.small-screen li.has-sub > .submenu-button {
832 display: block; 420 display: block;
833} 421}
834 422
835/* --- Variante Static --- */ 423.cssmenu-tools .menu-button:after {
836.cssmenu-static.small-screen .menu-button { 424 content: "\f0c9";
837 cursor: default;
838} 425}
839 426
840.cssmenu-static.small-screen .menu-button:after, 427
841.cssmenu-static.small-screen .menu-button:before { 428/* -- Cssmenu-group variant -- */
842 display: none; 429/* --------------------------- */
430.cssmenu-group {
431 text-align: center;
432 margin-bottom: 1.618rem;
843} 433}
844 434
845.cssmenu-static.small-screen ul li { 435.cssmenu-group li {
846 border-top: none; 436 display: inline-block;
847} 437}
848 438
849.cssmenu-static.small-screen > ul > li > .cssmenu-title, 439.cssmenu-group .cssmenu-title {
850.cssmenu-static.small-screen ul ul > li > .cssmenu-title { 440 font-size: 1.309rem;
851 padding-bottom: 5px; 441 padding: 0.309em;
442 border-width: 1px 0 1px 1px;
443 border-style: solid;
444 border-color: transparent;
445 font-weight: 300;
446 text-decoration: none;
852} 447}
853 448
854/* --- Personnalisation graphique du bouton responsive--- */ 449.cssmenu-group li:last-child .cssmenu-title {
855.cssmenu.small-screen .menu-button:after { 450 border-right-width: 1px;
856 border-color: #DDDDDD;
857} 451}
858 452
859#main .cssmenu.small-screen .menu-button { 453/* --- Variante cssmenu-group small-screen --- */
860 color: #111111; 454.cssmenu-group.small-screen ul li .cssmenu-title {
455 padding: 0.309em 0.618em;
861} 456}
862 457
863.cssmenu.small-screen .menu-button:before { background-color: #DDDDDD; }
864.cssmenu.small-screen .menu-button.menu-opened:after,
865.cssmenu.small-screen .menu-button.menu-opened:before { background-color: #DDDDDD; }
866
867header .cssmenu.small-screen .menu-button.menu-opened:after,
868header .cssmenu.small-screen .menu-button.menu-opened:before { background-color: #FFFFFF; }
869
870header .cssmenu-vertical.small-screen .menu-button.menu-opened:after,
871header .cssmenu-vertical.small-screen .menu-button.menu-opened:before { background-color: #DDDDDD; }
872
873header .cssmenu-tools.small-screen .menu-button.menu-opened:after,
874header .cssmenu-tools.small-screen .menu-button.menu-opened:before { background-color: #DDDDDD; }
875 458
876/* -- Bouton submenu -- */ 459/* -- Variantes cssmenu-statique -- */
877/* -------------------- */ 460/* -------------------------------- */
878 461.cssmenu-static > ul > li {
879/* --- Classes generales cssmenu --- */ 462 display: inline-block;
880.cssmenu.small-screen > ul > li.has-sub > .cssmenu-title:before, 463 vertical-align: top;
881.cssmenu.small-screen > ul > li.has-sub > .cssmenu-title:after {
882 display: none;
883} 464}
884 465
885.cssmenu.small-screen .submenu-button { 466.cssmenu-static > ul > li > .cssmenu-title {
886 position: absolute; 467 text-align: center;
887 z-index: 99;
888 right: 0;
889 top: 0;
890 display: block;
891 height: 46px;
892 width: 46px;
893 border-left: 1px solid rgba(120, 120, 120, 0.2);
894 cursor: pointer;
895} 468}
896 469
897.cssmenu.small-screen ul ul .submenu-button { 470.cssmenu-static ul li.has-sub > .cssmenu-title:after,
898 height: 34px; 471.cssmenu-static ul li.has-sub > .cssmenu-title:before {
899 width: 34px; 472 display: none;
900} 473}
901 474
902.cssmenu.small-screen .submenu-button:after, 475.cssmenu-static > ul > li {
903.cssmenu.small-screen .submenu-button:before { 476 padding: 0 0.618em;
904 position: absolute;
905 display: block;
906 content: '';
907} 477}
908 478
909.cssmenu.small-screen .submenu-button:after { 479.cssmenu-static > ul > li > .cssmenu-title {
910 width: 8px; 480 margin: 0 0 0.618em 0;
911 height: 2px; 481 font-size: 1.618rem;
482 font-weight: bold;
912} 483}
913 484
914.cssmenu.small-screen .submenu-button:before { 485.cssmenu-static ul ul {
915 width: 2px; 486 position: relative;
916 height: 8px; 487 left: 0;
488 z-index: 0;
917} 489}
918 490
919.cssmenu.small-screen .submenu-button.submenu-opened:before { 491.cssmenu-static ul ul > li > .cssmenu-title {
920 display: none; 492 padding: 0.228em 1.618em 0.228em 0.618em;
921} 493}
922 494
923.cssmenu-actionslinks.small-screen .submenu-button { 495.cssmenu-static ul ul ul > li > .cssmenu-title {
924 height: 31px; 496 padding: 0.228em 1.618em;
925 width: 31px;
926 border: none;
927} 497}
928 498
929/* --- Variante Static --- */
930.cssmenu-static.small-screen .submenu-button,
931.cssmenu-static.small-screen .submenu-button:after,
932.cssmenu-static.small-screen .submenu-button:before {
933 display: none;
934}
935 499
936.cssmenu-static.small-screen ul ul, 500/* --- Variante Static small-screen --- */
937.cssmenu-static.small-screen ul ul ul { 501.cssmenu-static.small-screen > ul > li > .cssmenu-title {
938 display: block !important; 502 text-align: left;
503 margin: 0;
939} 504}
940 505
941/* --- Personnalisation background Bouton submenu --- */ 506.cssmenu-static.small-screen .submenu-button:after { content: '\f0d8'}
942.cssmenu.small-screen .submenu-button:after { background-color: #DDDDDD; } 507.cssmenu-static.small-screen .submenu-button.submenu-opened:after { content: '\f0d7'}
943.cssmenu.small-screen .submenu-button:before { background-color: #DDDDDD; }
944
945.cssmenu.small-screen .submenu-button.submenu-opened:after { background-color: #FFFFFF; }
946
947.cssmenu.small-screen .submenu-button.submenu-opened { background-color: #262626; }
948#top-header .cssmenu.small-screen .submenu-button.submenu-opened { background-color: rgba(255, 255, 255, 0.05); }
949.cssmenu-actionslinks.small-screen .submenu-button.submenu-opened { background-color: #DDDDDD; }
950
951#menu-left .cssmenu.small-screen .submenu-button.submenu-opened { background-color: rgba(120, 120, 120, 0.2); }
952#menu-right .cssmenu.small-screen .submenu-button.submenu-opened { background-color: rgba(120, 120, 120, 0.2); }
953
954/* --- Postion icone Submenu --- */
955.cssmenu.small-screen .submenu-button:after { top: 22px; right: 19px; }
956.cssmenu.small-screen .submenu-button:before { top: 19px; right: 22px; }
957.cssmenu.small-screen ul ul .submenu-button:after { top: 15px; right: 13px; }
958.cssmenu.small-screen ul ul .submenu-button:before { top: 12px; right: 16px; }
959.cssmenu-actionslinks.small-screen .submenu-button:after { top: 14px; right: 11px; }
960.cssmenu-actionslinks.small-screen .submenu-button:before { top: 11px; right: 14px; }
Editor
Original Text
Changed Text
Recommended videos