Après le menu vertical, voici maintenant un menu horizontal en full largeur sur 2 niveaux.
Celui-ci s’adapte automatiquement suivant la largeur de votre écran, cependant il faudrait pour un mobile adapter celui-ci en le passant verticalement.
Petite note, dans l’exemple il y a 4 liens de menus, pour en mettre plus ou moins il faut changer la largeur des liens de menu de la façon suivante :
La largeur total est de 100% – la marge de droite et de gauche de 2% chacune, ce qui fait une largeur total de 96%.
On a donc 96% / X liens de menu.
Voici quelques exemples :
Pour 3 liens, cela donne une largeur de 32%.
Pour 4 liens, cela donne une largeur de 24%.
Pour 8 liens, cela donne une largeur de 12%.
Modifier la largeur des liens de menu
CSS
1
2
3
4
5
6
7
8
9
/* Affichage du 1er niveau du menu */
nav ul li {
position:relative;
background-color:black;
color:white;
float:left;
border-right:1pxsolidwhite;
width:24%;/* largeur à modifier */
}
Et comme toujours la feuille de style est commentée, vous pourrez donc facilement l’intégrer dans votre site.
Laisser un commentaire