Bootstrap 4: menu de navigation partie 1

bootstrap 4

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.

menu horizontal
menu horizontal basique

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>

nav

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 horizontal
justify-content-center

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 vertical
menu vertical

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

Pour créer des onglets nous allons rajouter une classe à la suite de la classe .nav :

Class : .nav-tabs
Onglets
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.
Boutons centrés
Boutons centré

Comment créer des boutons ou des onglets de navigation de largeur égale ?

Class : .nav-justified
On rajoute cette classe à la classe .nav.

Boutons largeur egales
Boutons largeur egales

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.

Menu responsive
nav-pills

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

Laisser un commentaire