Bootstrap 5 : créer une barre de navigation avec un menu déroulant

Bootstrap 5 menu déroulant

Nous avons vu dans la leçon précédente comment créer une barre de navigation basique avec Bootstrap 5. Regardons maintenant comment créer une barre de navigation plus sophistiquée en y intégrant un menu déroulant.

L’illustration de cette leçon va se faire en créant une toute nouvelle barre de navigation.

Table des matieres

Elle sera composée :

  • D’un lien accueil différent des autres liens.
  • D’un menu déroulant
  • D’un bouton
  • D’un menu rétractable

Les classes que nous allons voir ou revoir dans cette leçon :

  • navbar-expand-*
  • navbar-light bg-light
  • navbar-nav
  • nav-item
  • navbar-brand
  • dropdown
  • dropdown-toggle
  • data-bs-toggle=”dropdown
  • dropdown-menu
  • dropdown-item
  • data-bs-toggle=”dropdown (attribut)

Création d’une barre de navigation de basique (rappel)

Nous allons pour commencer, recréer la barre de navigation que nous avons réalisé dans la leçon sur les barres de navigation basique.

Pour rappel :

On crée une balise <nav> à laquelle on rajoute :

  • Un point de transition de 768px (md) à partir duquel les éléments viendront se positionner les uns en dessous des autres avec les classes :
      • navbar-expand-md
  • Un texte clair avec une couleur de fond sombre avec la classe :
      • navbar-light bg-light

Ce qui donne :  <nav class=”navbar navbar-expand-md navbar-light bg-light”>

  • Un conteneur fluide pour bien espacer les éléments.
      • <div class=”container-fluid”>
  • Enfin, nous créons une liste avec un lien accueil au design diffèrent des autres liens.
    • <ul class=”navbar-nav“>
      <!–Lien spécial–>
      <li class=”nav-item mt-1″>
      <a class=”navbar-brand” href=”#”>Accueil</a>
      </li>
      ….

Le code entier pour cette première partie.

Bootstrap 5 menu déroulant

Voyons maintenant comment créer un lien avec un menu déroulant.

Création d’un menu déroulant avec Bootstrap 5

La création d’un menu déroulant en HTML/CSS/JavaScript peut parfois s’avérer fastidieux. C’est pourquoi Bootstrap 5 a conçu différentes classes pour nous permettre de les réaliser très facilement et sans avoir à connaître le JavaScript.

Les classes et attributs nécessaires à la création d’un menu déroulant avec Bootstrap 5 :

  • dropdown , qui dans notre maquette s’intègre à la balise <li> .
  • dropdown-toggle qui s’intègre dans la balise <a> du lien que l’on veut déroulant <a>.
  • data-bs-toggle=”dropdown qui s’intègre lui aussi a la balise <a> du lien que l’on veut déroulant.
  • dropdown-menu qui s’intégrer à une balise <ul> imbriquer dans une balise.
  • dropdown-item qui s’intègre aux liens qui apparaissent lorsqu’on déroule le menu.

 Création du menu déroulant étape par étape :

1 : A la suite du lien « contact »…
<li class=”nav-item“>
   <a class=”nav-link” href=”#”>Contact</a>
</li>

..je crée un nouveau lien « produit » et je stipule à Bootstrap que je veux que ce lien possède un menu déroulant avec la classe dropdown.
• <li class=”nav-item dropdown“>

2 : On place ensuite le lien qui ouvre un menu déroulant avec la classes dropdown-toggle et l’attribut data-bs-toggle=”dropdown.

<a class=”nav-link dropdown-toggle” href=”#” data-bs-toggle=”dropdown>Produit</a>

3 : On imbrique une nouvelle liste <ul> dans la balise qui <li> (celle qui contient la classe dropdown) et on lui donne la classe dropdown-menu.
<ul class=”dropdown-menu“>


4 : dans la balise <li> nouvellement créé on place les liens <a> qui vont apparaître lorsqu’on déroule le menu, auquel on ajoute la classe dropdown-item.
<li><a class=”dropdown-item” href=”#”>Ordinateurs</a></li>
<li><a class=”dropdown-item” href=”#”>Tablettes</a></li>
<li><a class=”dropdown-item” href=”#”>Smartphone</a></li>

Le code entier pour cette deuxième partie :

Bootstrap 5 : créer une barre de navigation avec un menu déroulant/

Le code entier depuis le début :

Bootstrap 5 : créer une barre de navigation avec un menu déroulant

Le code entier depuis le début :

Bootstrap 5 : créer une barre de navigation avec un menu déroulant
Bootstrap 5 : créer une barre de navigation avec un menu déroulant
Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Content is protected !!
 
BOOGLIT
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0