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
|
/* ce qu'on applique à tous les éléments html */
* {
margin: 0; /* marge extérieure */
padding: 0; /* marge intérieure */
border: 0; /*bordure*/
box-sizing: border-box;
}
/* ------------------------------------------------------ */
/* MENU - style général */
/* ------------------------------------------------------ */
#navMain ul, #navMain li {
list-style: none; /* pas de style de liste (puces,...) */
}
/*#navMain > ul > li {position:relative;}*/
/* ------------------------------- */
/* fleche, avec rotation */
#navMain li.hasSub:after {
position: absolute;
content: "\25BC";
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;
/*cursor: pointer;*/
-o-transform: rotate(0deg);
-o-transition: -o-transform 0.5s;
-ms-transform: rotate(0deg);
-ms-transition: -ms-transform 0.5s;
-moz-transform: rotate(0deg);
-moz-transition: -moz-transform 0.5s;
-webkit-transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.5s;
transform: rotate(0deg);
transition: transform 0.5s;
}
#navMain li.hasSub:hover:after {
-o-transform: rotate(180deg);
-o-transition: -o-transform 0.5s;
-ms-transform: rotate(180deg);
-ms-transition: -ms-transform 0.5s;
-moz-transform: rotate(180deg);
-moz-transition: -moz-transform 0.5s;
-webkit-transform: rotate(180deg);
-webkit-transition: -webkit-transform 0.5s;
transform: rotate(180deg);
transition: transform 0.5s;
color: yellow;
}
/* pour tous les liens */
#navMain a {
display:block; /* block, au lieu de inline : le lien cliquable prend toute la largeur de son parent */
padding:10px;
font-family:Arial, sans-serif;
color: #fff;
background: #2980b9;
text-decoration: none; /* ne pas souligner les liens */
}
#navMain ul li > ul {
display:none;/* menu niveau 2 caché */
}
#navMain ul li:hover > ul {
display:block;/* si on survole un élément de niveau 1 du menu, on affiche le menu de niveau 2 */
}
#navMain a:hover {
background: #20638f; /*change la couleur de fond*/
}
/* ------------------------------------------------------ */
/* PHONE (largeur de fenetre inférieure à 640px) */
/* "MOBILE FIRST" : on définit d'abord les styles pour PHONE */
/* ------------------------------------------------------ */
/* MENU VERTICAL - largeur 100% */
@media screen and (max-width:640px) {
#navMain > ul {
width:10%; min-width:100px;
}
}
/* ------------------------------------------------------ */
/* TABLET+DESKTOP (largeur de fenetre supérieure à 640px) */
/* on utilise les media queries pour modifier les styles */
/* ------------------------------------------------------ */
/* MENU HORIZONTAL, centré - largeur 50% (mini : 640px) */
@media screen and (min-width: 641px)
{
#navMain> ul {/* slt niveau 1 */
display:table; /* se comporte comme une table */
width:50%; /* largeur du menu */
min-width:640px; /* largeur mini du menu */
margin:0 auto; /* menu centré dans son parent */
/*position :relative;*/
}
#navMain > ul > li {
display:table-cell; /* se comporte comme une cellule de table */
width:1%; /* astuce, pour que toutes les cellules aient la même largeur */
position : relative;
}
#navMain > ul > li > ul {
position : absolute;
width:100%;
z-index:1;
}
#navMain > ul > li > ul > li { position : relative; width:100%;
z-index:1; }
/*SPECIAL : SOUS-SOUS-MENU à droite*/
#navMain > ul > li > ul > li > ul { position : absolute; width:100%;
left:100%;/*SOUS-SOUS-MENU à droite*/
top:0;
z-index:1; }
#navMain > ul > li:last-child > ul > li > ul { position : absolute; width:100%;
left:-100%; /*dernier SOUS-SOUS-MENU à gauche*/
top:0;
z-index:1; }
}
}
/* ------------------------------------------------------ */ |
