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
| * {
margin:0;
padding:0;
border:0; }
html, body {
font-family:Arial,sans-serif;
font-size:100%; }
#navMain li {
position:relative; /* nécessaire pour positionner les sous-menus et les flèches ! */
}
#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 a:hover {
background: #20638f; /*change la couleur de fond*/
}
/* MENU */
#navMain ul,
#navMain li {
list-style: none;
top:100%; left:0; /* sous le niveau 1 */
}
#navMain ul ul,#navMain ul ul ul {/* menus de niveau 2*/
position:relative;
width:100%;
display:none;
}
#navMain ul ul a {
background:#333;
}
#navMain ul ul ul a {
background:#444;
}
#navMain ul li:hover > ul {
display:block;/*on affiche menu niveau 2 au survol */
}
/* flèche */
#navMain li.hasSub:after {
position:absolute;
content:"\25BC";
color:#FFF;
top: 10px;
right: 10px;
}
#navMain ul li.hasSub:last-child:after {
position:absolute;
content:"\25BC";
color:#FFF;
top: 10px;
right: 10px;
}
#navMain li:hover.hasSub:after {
color:yellow;
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
/*---------------- */
/* ------------------------------------------------------ */
/* TABLET+DESKTOP (largeur de fenetre supérieure à 640px) */
/* on utilise les media queries pour modifier les styles */
/* ------------------------------------------------------ */
/* MENU HORIZONTAL, centré - largeur 100% */
@media screen and (min-width: 641px)
{
#navMain > ul {/* slt niveau 1 */
display:table; /* se comporte comme une table */
width:50%; /* largeur du menu */
margin:0 auto;/* centrage. Notez aussi le très pratique margin:auto qui permet, dans le cas d'un bloc muni d'une largeur, de centrer horizontalement un élément.*/
min-width:640px;
}
#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 */
}
#navMain ul li {/* on positionne le parent des niveau 2 pour que le position de l'enfant soit prise en compte */
position:relative;
}
/* niveau 2 (et suivants) */
#navMain ul ul {
position: absolute;/* positionné en absolu (SORT DU FLUX) niveau 2 et suivants */
width: 100%;
top:100%; /* positionné en absolu SOUS le niveau 1 */
left:0;
}
/* niveau 3 (et suivants) */
#navMain ul ul ul {
top:0;
left:100%; /* niveau 3 à DROITE du niveau 2 */
}
#navMain ul li:last-child ul ul {/*on cible le dernier li de ul (dernier enfant de son parent) */
position: absolute;/* positionné en absolu (SORT DU FLUX) */
top:0;
left:-100%; /* A GAUCHE du niveau 2 */
}
/* flèche (pour menu avec sous-menu niveau 3) */
#navMain li li.hasSub:after {
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#navMain li li:hover.hasSub:after {
color:yellow;
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#navMain ul li:last-child li.hasSub:after {/*on cible le dernier li de ul (dernier enfant de son parent) faut mettre le ul */
left: 2px; /* positionné à gauche dans le sous-menu */
right: auto; /* on doit annuler la directive précédemment indiquée : right: 10px; */
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#navMain ul li:last-child li:hover.hasSub:after {
color:yellow;
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
} |