Après le système de grilles, les barres de navigation rétractable font parties des raisons principales pour lesquelles Bootstrap 5 et si populaire parmi les développeurs web.
Jusqu’ici nous avons créé des menus dit responsive c’est-à-dire que les éléments se positionnent les uns en dessous des autres lorsqu’on passe sous le point de transition que nous avons déterminé.
Par exemple si on stipule un breakpoint de 768px avec la classe md voilà ce que cela donne.
A partir de 768px
En dessous de 768px
Le résultat est propre mais on peut faire encore beaucoup mieux en créant un menu qui se rétracte à l’intérieur d’un bouton une fois passé sous le point de transition de 768px.
Pour créer ce menu rétractable nous allons placer un bouton dans la barre de navigation qui va avoir deux fonctions :
- Rendre le menu rétractable une fois sous le breakpoint déterminé (md).
- Permettre dérouler le menu lorsqu’on clique dessus.
Nous placerons aussi une icône en forme d’hamburger.
Les classes et attributs que nous allons découvrir dans cette leçon :
- navbar-toggler
- type= »button«
- data-bs-toggle= »collapse«
- data-bs-target= »#…«
- collapse
- navbar-collapse
Création de la barre de navigation avec un menu rétractable
Nous allons reprendre en partie la barre de navigation avec menu déroulant vue dans la leçon précédente avec certains changements que je préciserais au fil du code.
Elle va avoir un lien spécial accueil, un menu déroulant sur le dernier lien et devenir rétractable en dessous de 768px (md).
- On commence par déclarer notre barre de navigation avec pour caractéristiques un point de transition de 768px, une couleur de fond claire et une couleur de texte sombre.
- <nav class= »navbar navbar-expand-sm bg-light navbar-light« >
- Nous créons un conteneur (container-fluid) d’une largeur de 100%.
- <div class= »container-fluid« >
On crée le lien spécial « Accueil »
C’est ici que survient la première différence avec notre code de la leçon précédente. Souvenez-vous, on avait inclus ce lien dans la même liste que les autres liens.
Le problème ici, est que nous voulons que le lien accueil ne fasse pas partie de la liste <ul> des liens <li> qui vont se rétracter. On doit donc le placer en dehors de cette liste.
Ce qui donne :
<nav class= »navbar navbar-expand-sm bg-light navbar-light »>
<div class= »container-fluid »>
<a class= »navbar-brand » href= »# »>Accueil</a>
….
Comment vous pouvez le constater, le lien n’est pas intégré à la liste des autres liens.
Ceci étant précisé, il est maintenant temps de passer à la création du menu rétractable à proprement parlé.
1 : Création du bouton du menu rétractable et de son icone
A la suite de notre lien spécial « Accueil » on crée le bouton qui permettra de rétracter le menu.
- On crée le bouton avec la balise <button>.
- On intègre la classe navbar-toggler (qui signifie basculer).
- On précise le type : type= »button« .
- On précise le type de basculement (ici on veut que le bouton se rétracte) avec l’attribut data-bs-toggle= »collapse« .
- Ensuite nous donnons une identification ce bouton c’est très important pour la suite data-bs-target= »#menuretractable«
- Enfin nous créons une balise <span> a l’intérieur du bouton pour insérer l’icône en forme d’hamburger avec la classe : navbar-toggler-icon.
<span class= »navbar-toggler-icon« ></span>
Le code entier pour le bouton et l’icone
Le résultat
2 : Création des liens intégrés au menu rétractable
Il est temps maintenant d’intégrer les liens du menu rétractable. Pour ce faire, nous allons créer une nouvelle division (<div>) juste en dessous du bouton.
Dans la balise <div> nous allons placer les classes collapse et navbar-collapse pour regrouper et masquer les liens du menu de la barre de navigation une fois passés sous le point de transition md (768px).
Très important !
Nous devons rajouter dans la balise <div> l’ID que nous avons placé dans le bouton pour relier les deux ensembles.
<div class= »collapse navbar-collapse » id= »menuretractable« >
Il ne nous reste plus qu’à placer les liens vus dans la leçon sur la barre de navigation avec menu déroulant.
<div class= »collapse navbar-collapse » id=« menuretractable« >
<ul class= »navbar-nav« >
<li class= »nav-item« >
<a class= »nav-link » href= »# »>Présentation</a>
</li>
<li class= »nav-item« >
…
Le code entier
Résultat
