Comment utiliser le module Extras des éléments de menu pour Drupal 8

Publié: 2022-02-16

Les méga menus ne sont plus une tendance de conception, mais une partie essentielle de la plupart des sites Web liés à l'actualité ou au commerce électronique.

Le module Menu Item Extras pour Drupal 8 améliore le système de menu par défaut dans Drupal, en permettant au constructeur du site d'ajouter des champs aux éléments de menu. De cette façon, il est possible de créer un méga menu en quelques étapes simples.

Suivez-nous pour apprendre à utiliser ce module. Commençons!

Étape 1 : Installez les modules requis

En plus du module Menu Item Extras, vous devrez installer Viewfield. Viewfield fournit un champ qui contient une référence à une vue et la restitue chaque fois que l'entité contenant le champ est affichée.

  • Ouvrez l'application Terminal de votre PC.
  • Tapez :
    • le compositeur nécessite drupal/viewfield
    • le compositeur nécessite drupal/menu_item_extras

200414 éléments de menu extras 001200414 éléments de menu extras 001

Activez les deux modules après le téléchargement.

  • Cliquez sur Étendre.
  • Vérifiez les deux modules.
  • Cliquez sur Installer.

200414 éléments de menu extras 003

Étape 2 : Créer un système de taxonomie

Peut-être que le mot « système » n'est pas très approprié puisque nous ne créerons qu'un seul vocabulaire avec dix termes associés. Cependant, cet exemple expliquera les bases, afin que vous puissiez travailler avec des systèmes de taxonomie plus complexes à l'avenir.

  • Cliquez sur Structure > Taxonomie > Ajouter du vocabulaire.
  • Entrez le nom "Sujets" et cliquez sur Enregistrer.
  • Cliquez sur Ajouter un terme et ajoutez tous les termes détaillés ci-dessous un par un.
    • Les sujets
      • D8
      • SymfonyName
      • WP
      • Magento
      • CSS
      • HTML
      • JS
      • PHP
      • Python
      • DevOps

200414 éléments de menu extras 004

Étape 3 : Créer les types de contenu

Pour les besoins de ce tutoriel, nous allons utiliser 2 types de contenu avec les champs suivants :

  • Prestations de service
    • Service Image / Image / Nombre de valeurs autorisé : 1
    • Texte d'introduction / Texte (formaté) / Nombre de valeurs autorisé : 1
    • Description / Champ par défaut

200414 éléments de menu extras 005

  • Blog
    • Catégorie / Terme de taxonomie / Nombre de valeurs autorisé : illimité
    • Description / Champ par défaut

200414 éléments de menu extras 006

Assurez-vous de sélectionner le type de référence (sujets) lors de la création du champ Taxonomie.

200414 éléments de menu extras 007

Étape #4 : Créer du contenu

Nous allons créer 3 nœuds de type Service :

  • Tutoriels
  • Vidéos
  • Livres

Chacun de ces nœuds sera associé à un élément de second niveau dans le méga menu. D'autre part, nous allons créer environ 10 nœuds de type Blog avec différents termes qui leur sont associés. Assurez-vous d'inclure 2 des termes (ex. : D8, WP) avec plus de fréquence que les autres.

200414 éléments de menu extras 008

L'écran Contenu devrait ressembler à la fin de ce processus plus ou moins à l'image ci-dessous.

200414 éléments de menu extras 009

Étape #5 : Créer les éléments de menu

Le premier niveau du menu principal aura les éléments de menu suivants :

  • Accueil
  • Sur
  • Ressources
  • Contact

Chacun des éléments de menu aura un champ supplémentaire (supplémentaire). Ce champ sera défini au deuxième niveau du menu, c'est-à-dire chacun des éléments de la carte dans le méga menu. Ce champ nous permettra de présenter chacun des blocs de vue.

  • Cliquez sur Structure > Menus.
  • Cliquez sur le menu Edition pour modifier la navigation principale.

200414 éléments de menu extras 010

  • Cliquez sur Ajouter un lien 3 fois pour ajouter les éléments de menu de premier niveau manquants.
  • Cliquez sur Enregistrer chaque fois que vous entrez un nom d'élément de menu.

Utilisez la balise spéciale pour afficher uniquement le texte du lien.

200414 éléments de menu extras 011

200414 éléments de menu extras 012

Une fois que vous avez créé et réorganisé les liens de votre menu,

  • Cliquez sur Gérer les champs > Ajouter un champ pour ajouter un champ aux éléments de menu.
  • Sélectionnez un champ de type Viewfield.
  • Donnez- lui un nom et une étiquette appropriés.
  • Cliquez sur Enregistrer et continuer.

200414 éléments de menu extras 013

  • Définissez le Nombre de valeurs autorisé sur Illimité.
  • Cliquez sur Enregistrer les paramètres du champ

200414 éléments de menu extras 014

Vous aurez la possibilité de lier une vue par défaut à ce champ particulier. Laissez ces champs vides.

  • Faites défiler vers le bas et cliquez sur Enregistrer les paramètres
  • Cliquez sur Gérer l'affichage.

200414 éléments de menu extras 015

  • Masquez l'étiquette de la carte de menu.
  • Cliquez sur Enregistrer.

Étape 6 : Créer les vues

  • Cliquez sur Structure > Vues > Ajouter une vue
  • Afficher le contenu de type Services.
  • Créez un bloc avec une liste non formatée de champs.
  • Choisissez d'afficher 3 éléments par bloc.
  • Cliquez sur Enregistrer et modifier.

200414 éléments de menu extras 016

  • Ajouter le champ Image du service
  • Définissez le style d'image sur Vignette et liez l'image au contenu.
  • Cliquez sur Appliquer

200414 éléments de menu extras 017

  • Ajoutez également le champ de texte d'introduction.
  • Réorganisez les champs.
  • Cliquez sur Enregistrer.

200414 éléments de menu extras 018

  • Cliquez sur Structure > Vues > Ajouter une vue
  • Afficher le contenu de type Blog.
  • Créez un bloc avec une liste non formatée de champs.
  • Choisissez d'afficher 1 élément par bloc.
  • Cliquez sur Enregistrer et modifier.

Comment utiliser le module Extras des éléments de menu pour Drupal 8

  • Ajoutez le champ Catégorie.
  • Cliquez sur Ajouter et configurez les champs.
  • Cliquez sur les paramètres de champs multiples.
  • Sélectionnez Liste non ordonnée.
  • Définissez le nombre de valeurs à afficher sur 3.
  • Cliquez sur Appliquer.

200414 éléments de menu extras 020

  • Supprimer le critère de tri
  • Cliquez sur Appliquer.
  • Cliquez sur Enregistrer pour enregistrer la vue.

Étape #7 : Ajouter les blocs de vue aux éléments de menu

  • Cliquez sur Structure > Menus
  • Modifiez la navigation principale.
  • Modifiez l'élément de menu Ressources.
  • Ajoutez les 2 blocs que vous avez créés à l'étape #5.
  • Cliquez sur Enregistrer.

200414 éléments de menu extras 021

Étape #8 : Les styles CSS

Je ne vais pas expliquer ce code en détail car il sort du cadre de ce tutoriel. Cependant, vous pouvez en savoir plus sur les vues Drupal et la grille CSS dans cet article. Si vous souhaitez vous entraîner davantage avec les méga menus, consultez également cet article.

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }
OUVRIR DANS POPUP
 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

200414 éléments de menu extras 022

J'espère que ce tutoriel vous a plu. Merci d'avoir lu!