Bootstrap : Créer un méga dropdown menu responsive

Introduction

Le framework CSS Bootstrap propose une barre de navigation « .navbar » avec un menu déroulant (dropdown) d’une colonne qui se présente de la manière suivante :

Le code source qui produit ce dropdown :

<li class="nav-item dropdown">

	<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	Dropdown
	</a>

	<div class="dropdown-menu" aria-labelledby="navbarDropdown">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Something else here</a>
	</div>
  
</li>

Nous avons les éléments suivants :

• « nav-item dropdown » : le contenant du dropdown
• « nav-link dropdown-toggle » : l’élément déclencheur (Afficher/masquer) du dropdown
• « dropdown-menu » : le contenu du dropdown.

Mais quand ce dropdown menu nous laisse peu d’espace pour présenter plusieurs éléments en plusieurs colonnes, nous pouvons le transformer, l’élargir en le gardant responsive comme le montre la capture ci-dessous :

Nous vous présentons une astuce au point suivant pour mettre en place ce large menu dropdown responsive. Mais avant, vous pouvez récupérer le code source complet de ce cours en cliquant ici.

Le méga dropdown avec l’alignement flex

Voici le code source pour reproduire le méga dropdown menu présenté, nous l'expliquons juste après :

<li class="nav-item dropdown">

	<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	Mega Dropdown
	</a>

	<div class="dropdown-menu pt-0" aria-labelledby="navbarDropdown">

		<img src="./img/cover.jpg" class="img-fluid" alt="" >

		<div class="d-flex align-items-start flex-column flex-sm-row p-3">

			<div>
				<div class="dropdown-header">Services</div>
				<a class="dropdown-item" href="#" >Développement web</a>
				<a class="dropdown-item" href="#" >Développement mobile</a>
				<a class="dropdown-item" href="#" >UX et Design</a>
				<a class="dropdown-item" href="#" >Infographie</a>
			</div>

			<div>
				<div class="dropdown-header">Technologies</div>
				<a class="dropdown-item" href="#" >HTML et CSS</a>
				<a class="dropdown-item" href="#" >BOOTSTRAP</a>
				<a class="dropdown-item" href="#" >PHP et LARAVEL</a>
				<a class="dropdown-item" href="#" >JAVASCRIPT et VUE.JS</a>
			</div>

			<div>
				<div class="dropdown-header">Outils</div>
				<a class="dropdown-item" href="#" >Visual Studio Code</a>
				<a class="dropdown-item" href="#" >Laragon</a>
				<a class="dropdown-item" href="#" >Google Chrome</a>
				<a class="dropdown-item" href="#" >Windows 10</a>
			</div>

		</div>

	</div>

</li>

Nous avons les éléments suivants dans « dropdown-menu », le contenu du menu déroulant :

1. Une image « img » avec la classe « img-fluid » pour qu’elle prenne la largeur maximale du dropdown :

<img src="./img/cover.jpg" class="img-fluid" alt="" >

2. Le conteneur « div » des colonnes du menu avec les classes :

• « d-flex » pour avoir des éléments (colonnes) flexibles, les « div » enfants
• « align-items-start » pour aligner les éléments au début (dessus - gauche) au sein du conteneur
• « flex-column » pour gérer le côté responsive, afficher verticalement les éléments sur mobile
• « flex-sm-row » pour gérer le côté responsive,  afficher horizontalement des éléments sur tablette et ordinateur
• « p-3 » pour la marge interne

<div class="d-flex align-items-start flex-column flex-sm-row p-3">

	<div>Contenu de la colonne 1</div>

	<div>Contenu de la colonne 2</div>

	<div>Contenu de la colonne 3</div>

</div>

Vous pouvez donc aligner et gérer le comportement responsive des colonnes de votre large menu avec les classes align-items-* et flex-*, voir la documentation Flex.