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
| /* ce qu'on applique à tous les éléments html */
* {
margin: 0; /* marge extérieure */
padding: 0; /* marge intérieure */
border: 0; /*bordure*/
}
/* ------------------------------------------------------ */
/* MENU - style général */
/* ------------------------------------------------------ */
#navMain ul, #navMain li {
list-style: none; /* pas de style de liste (puces,...) */
}
/* 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:1%;
}
navMain > ul > li {
position : absolute
}
#navMain > ul > li > ul {
position : relative;
}
}
/* ------------------------------------------------------ */
/* 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 {/*position:absolute;*/}
#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%;
min-width:180px;
}
}
/* ------------------------------------------------------ */ |
