Plan du cours
Dans cette leçon, nous allons créer plusieurs menus de navigation. On commencera par un menu tout simple et on évoluera petit à petit vers des menus plus complexes.
Menu basique horizontal
Classe utilisées :
- .nav
- .nav-item
- .nav-link
Balises utilisées :
- <ul>
- <li>
- <a>
La balise <ul> contiendra la classe .nav.
La balise <li> contiendra la classe .nav-item.
La balise <a> contiendra la classe .nav-link.
Vous pouvez créer une classe dans votre propre fichier css pour mettre en avant le lien actif, vous rajouterez ensuite cette classe à la balise <a> comme ceci :
<a class=”nav-link active” href=”#”>Accueil</a>
Css :
.active {
color: red;
}
Bootstrap 4 possède par contre sa propre classe pour désactiver un lien :
Classe: .disabled
Elle vient se rajouter à la classe .nav-link.
<a class=”nav-link disabled” href=”#”>Contact</a>
Centrer ou positionner le menu à droite
Bootstrap a créé 2 classes pour cela :
- .justify-content-center : pour centrer le menu.
- .justify-content-end : pour aligner le menu à droite.
Ces deux classes viennent s’ajouter à la classe .nav.
Exemple pour centrer le menu :
Menu basique vertical
Vous allez voir c’est très simple : à la base bootstrap crée un menu horizontal pour le faire basculer verticalement, on rajoute à la classe .nav la classe : .flex-column.
Menu avec onglets / boutons de navigation
Jusqu’à présent nous avons vu un menu basique par très esthétique.
Si on lui rajoutait des onglets (tabs) ou des boutons (pills) ça ferait quand même plus pro, non ?
Onglets
Class : .nav-tabs
Boutons
Pour les boutons, on fait la même chose en changeant juste de classe :
Class : .nav-pills
Dans cet exemple, en plus d’introduire des boutons, on va aussi centrer le menu avec la classe .justify-content-center.
Comment créer des boutons ou des onglets de navigation de largeur égale ?
Class : .nav-justified
On rajoute cette classe à la classe .nav.
Menu responsive
Pour finir cette première partie, nous allons voir comment rendre notre menu responsive (nous verrons plus tard dans la partie barre de navigation (nav-bar) comment faire un menu plus design pour les petits écrans).
Classe : .flex-sm/md/lg/xl-row + .flex-column
Ces deux classes vont se rajouter à la classe .nav
La classe .flex-column qui bascule le menu de la position horizontale à la position verticale ne se déclenchera qu’en dessous de la résolution stipulée.
Dans ce dernier exemple, on souhaite que les éléments du menu se mettent les uns en dessous des autres sur les écrans possédant une résolution de moins de 768px, nous allons donc choisir pour ce faire la classe .sm.
Revenons rapidement sur cette ligne :
<ul class=”nav nav-pills flex-sm-row flex-column“>
Signification :
Ceci est un menu de navigation : .nav.
Il possède des boutons : .nav-pills
Lorsque la résolution d’écran passe sous les 768px : .flex-sm-row
Bascule le menu dans la position verticale : .flex-column