Construire un méga menu avec Ultimenu et Bootstrap dans Drupal 8

Publié: 2022-02-16

Un de nos clients a demandé comment créer un méga menu dans Drupal 8.

Les méga menus sont des menus avec une navigation multi-colonnes. Ils deviennent rapidement une tendance dans la conception de sites Web.

Le module Ultimenu permet d'insérer des blocs Drupal dans un menu. Vous pouvez facilement l'utiliser pour créer des mises en page de menus assez complexes.

Dans ce didacticiel, vous apprendrez à créer un méga menu simple à l'aide du module Ultimenu et de Bootstrap.

Le client visait à créer un méga menu similaire à celui de l'image ci-dessous :

Les menus déroulants du méga menu doivent avoir une largeur de 100 %. Leur contenu doit être des blocs Drupal.

L'approche Ultimenu

Le module Ultimenu génère un bloc pour chaque menu que vous ajoutez dans la page des menus de votre installation Drupal (admin/structure/menu).

Vous pouvez placer ce bloc dans l'écran Disposition des blocs comme n'importe quel autre bloc. Le module transforme les éléments de menu en régions dynamiques dans la page de mise en page des blocs.

De cette façon, vous pouvez insérer des blocs (blocs personnalisés, vues, etc.) dans ces régions.

Un bloc contenant des régions contenant des blocs :

Étape 1. Installer le module

Installez le module avec composer :

composer require drupal/ultimenu

Après le téléchargement, cliquez sur Étendre et activez le module. Aucune autre dépendance n'est requise :

Étape 2. Créer le menu

Cliquez sur Structure > Menus .
Recherchez la navigation principale
Cliquez sur le menu Edition .

Cliquez sur le bouton Ajouter un lien
Ajoutez les éléments de menu de premier niveau :

Le lien Voyage pointe vers route:<nolink> . Cet élément parent n'est là que pour contenir d'autres éléments :

Étape 3. Configurer le bloc Ultimenu

Cliquez sur Structure > Ultimenu .
Onglet sélectionnez Navigation principale dans les blocs Ultimenu verticaux
Cliquez sur Enregistrer la configuration :

Cliquez sur Régions Ultimenu.
Sélectionnez Ultimenu:main: Voyage

Ultimenu créera cette région dynamiquement dans la page Disposition des blocs , afin que vous puissiez y placer des blocs.

Cliquez sur Enregistrer la configuration :

L'onglet des goodies Ultimenu propose des options de configuration supplémentaires. Je ne vais vérifier aucune de ces options. Veuillez lire la documentation du module pour comprendre le fonctionnement de ces options, en particulier si vous construisez un site multilingue.

Étape 4. Le bloc d'images

Pour placer une image dans un bloc, vous devez créer un type de bloc personnalisé avec le champ Image .

Cliquez sur Structure > Disposition des blocs > Bibliothèque de blocs personnalisés > Types de blocs .
Cliquez sur le bouton Ajouter un type de bloc personnalisé :

Donnez au type de bloc un nom propre.
Cliquez sur Enregistrer :

dix

Cliquez sur Gérer les champs.
Supprimez le champ Corps .
Cliquez sur Ajouter un champ.
Ajoutez le champ Image .
Enregistrez -le avec les valeurs par défaut.
Cliquez sur Gérer l'affichage.
Masquez l'étiquette de bloc :

Cliquez sur Structure > Disposition des blocs > Bibliothèque de blocs personnalisés > Ajouter un bloc personnalisé :

Cliquez sur Bloquer avec image :

Téléchargez une image.
Cliquez sur Enregistrer :

Étape #5. Le bloc de liens

Il existe de nombreuses manières d'obtenir un bloc avec des liens sur quatre colonnes, par exemple avec les Vues.

Je travaille avec un sous-thème Bootstrap dans ce tutoriel. Je vais utiliser un bloc de base avec le balisage Bootstrap et les classes.

Consultez ce tutoriel pour apprendre à créer un sous-thème Bootstrap dans Drupal.

Cliquez à nouveau sur Ajouter un bloc personnalisé .
Sélectionnez le bloc de base cette fois.
Donnez au bloc un nom propre.
Sélectionnez Full HTML comme format de texte dans l'éditeur.
Cliquez sur le bouton Source .
Collez le code suivant dans la fenêtre de l'éditeur :

 <div class="row"> <div class="col-sm-3"> <h3>Top destinations</h3> <ul> <li><a href="#">North America</a></li> <li><a href="#">Latin America</a></li> <li><a href="#">Middle East</a></li> <li><a href="#">Europe</a></li> <li><a href="#">Africa</a></li> </ul> </div> <div class="col-sm-3"> <h3>Editor's choice</h3> <ul> <li><a href="#">Best Hotel Deals</a></li> <li><a href="#">Cruise Deals</a></li> <li><a href="#">City Breaks</a></li> <li><a href="#">Activities</a></li> <li><a href="#">Culture</a></li> </ul> </div> <div class="col-sm-3"> <h3>City breaks</h3> <ul> <li><a href="#">Paris</a></li> <li><a href="#">Hong Kong</a></li> <li><a href="#">Rome</a></li> <li><a href="#">London</a></li> <li><a href="#">Tokyo</a></li> </ul> </div> <div class="col-sm-3"> <h3>Custom menu</h3> <ul> <li><a href="#">Disclaimer</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Advertisement</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </div>

Cliquez sur Enregistrer.

Étape #6. Placer le bloc Ultimenu

Cliquez sur Structure > Disposition des blocs .
Désactivez le bloc de navigation principale par défaut.
Placez l' Ultimenu : Navigation principale dans la région Navigation (réductible).
Décochez Afficher le titre .
Cliquez sur Enregistrer le bloc .

Étape #7. Placez les blocs dans la région "Voyage"

Faites défiler vers le bas de la page.

Vous verrez la région générée dynamiquement que vous avez attribuée lors de la configuration de votre Ultimenu.

Cliquez sur Placer le bloc :

Placez le bloc personnalisé d'image dans cette région.
Décochez Afficher le titre.
Cliquez sur Enregistrer le bloc.
Répétez le processus avec le bloc de balisage Bootstrap :

Réorganisez l'ordre des blocs si nécessaire.
Cliquez sur Enregistrer les blocs :

Allez maintenant à la page d'accueil de votre site et jetez un œil au menu. Quelques ajustements CSS sont nécessaires.

Étape #8. Le CSS

Par défaut, le fichier de bibliothèques de votre sous-thème pointe vers le fichier style.css dans le dossier css/ de votre sous-thème Bootstrap.

Ajoutez le code suivant à ce fichier :

 /* Google fonts */ @import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); /* Menu Links */ .ultimenu__link { text-transform: uppercase; font-family: 'Roboto', sans-serif; color: #000; font-size: 1.1em; display: inline-block; font-weight: 700; padding: 0.8em; } .has-ultimenu:hover { background-color: #FFF; } /* Image Block */ #block-megamenuimage { width: 100%; } #block-megamenuimage img { width: 100%; } /* Links block */ #block-multicolumnblock { width: 100%; } #block-multicolumnblock h3 { text-transform: uppercase; font-family: 'Roboto', sans-serif; background: #000; color: beige; font-size: 1em; display: inline-block; font-weight: 700; padding: 0.8em; border-radius: 10px; } #block-multicolumnblock li { list-style: none; border-top: 0.5px dashed #333; } #block-multicolumnblock li:last-child { border-bottom: 0.5px dashed #333; } #block-multicolumnblock li a { text-decoration: none; color: #333; display: block; line-height: 2.5em; }

À présent, vous devriez déjà avoir remarqué comment modifier le menu par vous-même :

Résumé

Vous venez d'apprendre à créer des mégamenus dans Drupal à l'aide du module Ultimenu, de Bootstrap et d'une approche « bloc Drupal » facile à comprendre.

Merci d'avoir lu!