Création d’un méga menu avec Acquia Site Studio / Blogs / Perficient

Les méga menus sont une fonctionnalité de menu extensible avec une multitude d’options au sein d’une seule interface, utilisant un format déroulant.

Les conceptions de méga-menus peuvent varier en complexité. Ils sont particulièrement utiles pour gérer une quantité considérable de contenus ou donner un aperçu rapide d’une sous-catégorie de pages.

Étapes pour créer :

Requis:

Acquia Site Studio : (https://www.acquia.com/drupal/site-studio)

Module Extras d’élément de menu : (https://www.drupal.org/project/menu_item_extras)

Ajouter un champ à votre menu:

Un champ peut être ajouté au menu via la section « Structure -> Menus ». Pour lancer ce processus, vous devez modifier votre menu existant ou en créer un nouveau. Une fois dans l’éditeur de menu, l’étape suivante consiste à ajouter un champ. Ce champ peut être de n’importe quel type en fonction de vos besoins.

Puisqu’il s’agit d’un exemple de Site Studio, nous allons choisir un champ « Site Studio – Layout Canvas ». De cette façon, nous pouvons déposer n’importe quel composant dans le menu.

Ajout de contenu à votre nouveau champ de menu :

Selon le type de champ que vous utilisez, vous devrez peut-être modifier les options « Gérer l’affichage » pour ce champ spécifique.

Dans notre exemple, nous associons le « contenu » du méga menu à l’élément de menu de premier niveau.

Cet élément de menu fonctionne comme l’emplacement désigné pour afficher votre contenu. C’est donc exactement l’élément de menu où vous devez ajouter votre contenu.

Rendu de votre champ d’élément de menu sur un modèle de menu Site Studio :

Pour en savoir plus sur la création d’un menu à plusieurs niveaux, reportez-vous à La documentation d’Acquia ici.

Commencez par créer la structure de votre menu. Une fois la structure du menu en place, identifiez l’emplacement où vous souhaitez que votre champ de canevas de mise en page soit affiché dans le menu. Dans notre exemple, nous plaçons le menu de deuxième niveau ET notre champ « canevas de mise en page » à l’intérieur du premier niveau du menu.

Le wrapper agira comme une liste déroulante qui sera basculée.

Tu peux utiliser divers éléments pour insérer votre « contenu » depuis votre menu Drupal. Pour cet exemple, nous utiliserons l’élément Inline.

Ajout de votre jeton à l’élément en ligne :

Ensuite, nous devrons localiser le jeton associé au champ que nous avons ajouté à notre élément de menu.

Dans votre élément, utilisez le navigateur de jetons pour localiser le jeton dans la liste déroulante « Lien de menu personnalisé ». Dans notre exemple, nous l’avons appelé « Mega Menu Canvas ».

Enregistrez le modèle de menu et actualisez votre site Web. Passez la souris sur l’élément de menu parent auquel vous avez ajouté le méga menu !