Comment créer un Mega Menu avec Divi

Déc 19, 2024 | Trucs & Astuces, Divi, Wordpress | 0 commentaires

TRUCS & ASTUCES

5. Créer un Méga Menu avec Divi(1ère partie)

Introduction

Dans le monde des sites web modernes, la navigation joue un rôle clé pour retenir vos visiteurs. Un Mega Menu, bien conçu, permet de structurer de façon claire et élégante une grande quantité de contenus. Contrairement aux menus traditionnels avec des sous-menus empilés verticalement, un Mega Menu organise les éléments horizontalement en colonnes, facilitant ainsi la navigation.

Résultat ? Une navigation intuitive et une mise en valeur efficace de vos services, produits ou articles.

Si vous utilisez le thème Divi, vous avez de la chance ! Vous pouvez créer un Mega Menu sans plugin tiers, en utilisant simplement les outils natifs et un peu de CSS.

Dans ce premier article, nous vous guidons pas à pas pour concevoir un menu élégant et performant avec les options natives de Divi en utilisant la classe « mega-menu ». Dans un prochain article, nous vous expliquerons comment créer un mega menu simplement grâce au Theme Builder de Divi.

Prenons pour l’exemple un site web fictif dédié au partage de Ebooks. Nous aurons besoin d’un méga menu pour afficher les genres de livres numériques proposés.

Table des Matières

1. Étape 1 : Configurer le menu de WordPress
2. Étape 2 : Ajouter une classe CSS pour activer le Mega Menu
3. Étape 3 : Styliser le Mega Menu avec CSS
4. Étape 4 : Ajouter des images ou des icônes
5. Étape 5 : Adapter le Mega Menu pour mobile
6. Étape 6 : Tester et optimiser
Conclusion

Comment commencer?

Étape 1 : Configurer le Menu dans WordPress

Avant d’entrer dans les détails techniques, commençons par la base : organiser votre menu.

Voici comment procéder :

Connectez-vous à votre tableau de bord WordPress, puis allez dans Apparence > Menus.
Créez un menu principal et ajoutez-y vos pages, catégories ou liens personnalisés.
Structurez les sous-menus : pour cela, glissez les éléments légèrement vers la droite sous leur parent. Par exemple :
- Parent : Genres
  - Sous-menu 1 : Policier
  - Sous-menu 2 : Fantastique
  - Sous-menu 3 : Les Classiques
  - Sous-menu 4 : Romans
  - Ensuite pour chaque sous-menus vous pouvez ajouter des sous-éléments (sous-éléments1, sous-éléments2 etc.)

Assurez-vous que votre menu est clair et logique pour vos visiteurs.

Étape 2 : Ajouter une Classe CSS pour activer le Mega Menu

Pour indiquer que certains menus doivent adopter un format « Mega Menu », nous allons leur attribuer une classe CSS spéciale.

Suivez ces étapes :

Allez dans Apparence > Menus depuis votre tableau de bord WordPress.
Cliquez sur l’onglet Options d’écran (situé en haut à droite).
Activez l’option Classes CSS.
Ajoutez la classe mega-menu à l’élément parent correspondant (par exemple : « Nos Services »).

Cette classe sera essentielle pour appliquer des styles personnalisés au menu concerné.

  /*Optionnel : Ajouter une flèche au-dessus du sous-menu du méga menu */
  nav > ul > li > ul:after {
    position: absolute;
    left: 55%; /* Ajuste le positionnement de la flèche à 55% du parent-suivant vos besoins */
    margin-left: -10px; /* Centre la flèche horizontalement */
    top: -10px; /* Positionne la flèche au-dessus du sous-menu */
    width: 0;
    height: 0;
    content: ''; /* Permet d'ajouter du contenu (ici une flèche) */
    border-left: 10px solid transparent; /* Crée la partie gauche de la flèche */
    border-right: 10px solid transparent; /* Crée la partie droite de la flèche */
    border-bottom: 10px solid #ffffff; /* Crée la partie inférieure de la flèche (couleur blanche) */
    z-index: 1; /* Assure que la flèche est au-dessus des autres éléments */
  }

  /* Correction pour que le méga menu prenne toute la largeur de son conteneur */
  .et-menu-nav li.mega-menu > ul {
    display: flex; /* Utilise Flexbox pour organiser les éléments en ligne */
    flex-wrap: wrap; /* Permet au contenu de se replier sur plusieurs lignes si nécessaire */
    justify-content: space-between; /* Espace les éléments sur toute la largeur disponible */
    padding: 20px; /* Ajoute de l'espace autour du contenu */
    margin: 0;
    list-style: none; /* Supprime les puces des éléments de la liste */
    width: 100%; /* Utilise toute la largeur du conteneur parent-vous pouvez définir aussi la largeur en px 1000px par ex. */
    border-top: none !important; /* Retire la bordure supérieure si présente */
    border-radius: 10px; /* Arrondit les coins du menu */
    box-shadow: 0 0 40px 5px rgba(0, 48, 47, .2); /* Ajoute une ombre douce autour du menu */
  }

  .et-menu-nav li.mega-menu > ul > li {
    width: 23%; /* Chaque élément de la liste occupe 23% de la largeur disponible */
    margin: 0; /* Enlève les marges entre les éléments */
    text-align: center; /* Centre le texte dans les éléments */
    padding: 10px 0; /* Ajoute un espacement vertical autour du contenu des éléments */
  }

  /* Réinitialise les effets de float et place les éléments en ligne */
  .et-menu-nav li.mega-menu ul li {
    float: none !important; /* Annule le flottement des éléments */
    display: inline-block; /* Affiche les éléments en ligne */
    padding: 0 !important; /* Retire tout padding indésirable */
  }

  /* Aligner les sous-menus au centre et positionner correctement */
  .et_pb_menu_0_tb_header.et_pb_menu .et-menu-nav li ul.sub-menu{
    left: 50%!important; /* Place le sous-menu au centre horizontalement */
    right: auto!important;
    text-align: center!important; /* Centre le texte dans le sous-menu */
    transform: translate(-50%, 0)!important; /* Centre parfaitement le sous-menu */
  }

  .et_pb_menu_0_tb_header.et_pb_menu ul li a{
    margin: auto !important; /* Centre les liens dans les éléments de menu */
  }

/* Style pour la version mobile */
          
  /* Triangle sous le méga menu */
  .et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    top: -14px;
    width: 0;
    height: 0;
    content: '';
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #fff; /* Triangle pointant vers le bas */
  }

  /* Ajuster la taille et le positionnement du bouton toggle dans le menu mobile */
  ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
  ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
    width: 44px;
    height: 100%;
    padding: 0px !important;
    max-height: 44px;
    border: none;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 999;
    background-color: transparent; /* Arrière-plan transparent */
  }

  /* Assurer que les éléments du menu mobile ont un positionnement relatif */
  ul.et_mobile_menu > li.menu-item-has-children,
  ul.et_mobile_menu > li.page_item_has_children {
    position: relative;
  }

  /* Supprimer la couleur de fond par défaut des éléments ayant des sous-menus */
  .et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
  }

  /* Masquer les sous-menus par défaut */
  ul.et_mobile_menu .menu-item-has-children .sub-menu {
    display: none !important;
    visibility: hidden !important;
  }

  /* Afficher les sous-menus lorsque le toggle est activé */
  ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
    display: block !important;
    visibility: visible !important;
  }

  /* Ajuster la position et l'opacité de l'icône du bouton toggle */
  ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
    text-align: center;
    opacity: 1;
  }

  /* Icône de fermeture du sous-menu */
  ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
    top: 10px;
    position: relative;
    font-family: "ETModules";
    content: '\33'; /* Code pour l'icône de fermeture */
    color: #000000; /* Code pour la couleur de la flèche */
    background: #f0f3f6; /* Code pour la couleur de fond */
    border-radius: 50%;
    padding: 3px;
  }

  /* Icône du sous-menu ouvert */
  ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after {
    content: '\32'; /* Code pour l'icône de sous-menu ouvert */
  }

  /* Ajouter un triangle pour indiquer un sous-menu */
  .et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
    position: absolute;
    right: 5%;
    margin-left: -20px;
    top: -14px;
    width: 0;
    height: 0;
    content: '';
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #ffffff;
  }

  /* Ajuster le positionnement du menu hamburger */
  .mobile_menu_bar {
    position: relative;
    display: block;
    bottom: 10px;
    line-height: 0;
  }

  /* Ajouter une couleur de fond et des bordures arrondies pour le menu mobile */
  .et_pb_menu_0.et_pb_menu .et_mobile_menu,
  .et_pb_menu_0.et_pb_menu .menu-item-has-children,
  .et_pb_menu_0.et_pb_menu .et_pb_button,
  .et_pb_menu_0.et_pb_menu .button {
    background-color: transparent;
  }

Ajoutez ce code dans Divi > Options du thème > CSS personnalisé ou dans un module « Code » de Divi dans la section du Header global de votre site, ou enfin dans le fichier style.css de votre thème enfant si vous en utiliser un.

Étape 4 : Ajouter des Images ou des Icônes

Les images ou les icônes ajoutent un aspect visuel à votre Mega Menu, ce qui peut améliorer l’expérience utilisateur. Vous pouvez utiliser des images pour illustrer chaque élément de menu, et même ajouter des liens vers des produits ou des articles de blog !

Voici comment procéder :

Accédez à l’interface de gestion des menus : Depuis le tableau de bord WordPress, allez dans Apparence > Menus. Sélectionnez le menu auquel vous souhaitez ajouter des images, ou créez un nouveau menu si nécessaire.
Ajoutez un lien personnalisé : Dans la liste Ajouter des éléments de menu, sélectionnez Liens personnalisés. Dans le champ URL, ajoutez un # (cela permet de créer un lien sans destination), puis cliquez sur Ajouter au menu.
Ajoutez le code HTML pour l’image : Pour chaque élément de menu où vous souhaitez ajouter une image, ouvrez le Paramètre du menu (cliquez sur la flèche à côté du menu). Dans le champ Libellé du lien de navigation, insérez le code HTML suivant :

Remplacez URL_DE_VOTRE_IMAGE par l’URL de l’image que vous souhaitez utiliser. Vous pouvez obtenir cette URL en allant dans la Bibliothèque de médias de WordPress, en sélectionnant l’image, et en copiant son lien.
Sauvegardez votre menu : N’oubliez pas de cliquer sur le bouton Enregistrer le menu pour valider vos modifications.
Personnalisez l’apparence de l’image : Si vous souhaitez modifier le style de l’image dans le menu (par exemple, ajouter des bordures arrondies ou ajuster la taille), vous pouvez utiliser des classes CSS personnalisées. Pour ce faire, activez les Classes CSS dans les Options de l’écran en haut de la page de gestion du menu, puis ajoutez une classe à l’élément de menu correspondant (par exemple, ldd-menu-image).


@media only screen and (max-width: 768px) /* Ajouter une bordure arrondie à l'image */
.ldd-menu-image img {
    border-radius: 10px;
}

/* Supprimer le padding autour de l'image */
.ldd-menu-image a {
    padding: 0!important;
}

/* Supprimer l'effet de survol semi-transparent */
.ldd-menu-image a:hover {
    opacity: 1!important;
}

Comment créer une Mega Menu avec Divi sans plugin

   jQuery(function($) {
        $(document).ready(function() {
            // Ajout d'un bouton "toggle" (d'activation/désactivation) pour les sous-menus dans le menu mobile
            $("body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children")
                .append('<a href="#" class="mobile-toggle"></a>');

            // Gestion du clic sur le bouton toggle
            $('ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ul.et_mobile_menu li.page_item_has_children .mobile-toggle')
                .click(function(event) {
                    event.preventDefault(); // Empêche le comportement par défaut du lien
                    $(this).parent('li').toggleClass('dt-open'); // Bascule l'état d'ouverture du sous-menu
                    $(this).parent('li').find('ul.children').first().toggleClass('visible'); // Affiche ou masque le sous-menu enfants
                    $(this).parent('li').find('ul.sub-menu').first().toggleClass('visible'); // Affiche ou masque le sous-menu principal
                    
                    // Ferme les autres sous-menus en dehors de celui sur lequel on a cliqué
                    $(this).parent('li').siblings().removeClass('dt-open')
                        .find('ul.children').removeClass('visible');
                    $(this).parent('li').siblings().find('ul.sub-menu').removeClass('visible');
                });

            // Ajouter un icône personnalisé (le caractère "P") à chaque élément de menu ayant des sous-menus
            iconFINAL = 'P';
            $('body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children')
                .attr('data-icon', iconFINAL);

            // Gestion de l'effet "hover" sur le bouton toggle (changement d'état visuel quand la souris passe dessus)
            $('.mobile-toggle').on('mouseover', function() {
                $(this).parent().addClass('is-hover'); // Ajoute la classe "is-hover" lors du survol
            }).on('mouseout', function() {
                $(this).parent().removeClass('is-hover'); // Enlève la classe "is-hover" lorsque la souris quitte
            });
        });
    });

Étape 6 : Tester et Optimiser

Une fois le Mega Menu configuré, testez-le :

Vérifiez son affichage sur différentes tailles d’écran.
Assurez-vous que la navigation reste intuitive et rapide.
Utilisez des outils comme Google PageSpeed Insights pour évaluer les performances.

Optimisation SEO ajoutée :

Intégration des mots-clés comme « Mega Menu », « navigation Divi », « menu avancé WordPress ».
Utilisation d’une structure claire avec des sous-titres, idéale pour le référencement naturel.
Appel à l’action engageant pour inciter les lecteurs à vous contacter.

Prêt à démarrer votre projet ou besoin d’aide pour optimiser votre site internet ? Contactez-nous dès aujourd’hui pour obtenir un devis gratuit !

DEVIS Gratuit

NOUS CONTACTER

Restez connectés avec nos dernières News et Mises à jour

Joindre notre Newsletter

Restez informé des dernières nouveautés et offres exclusives en vous abonnant à notre newsletter

0 commentaires

Soumettre un commentaire Annuler la réponse

Vous devez vous connecter pour publier un commentaire.

← Comment réaliser un carousel de produits Woocommerce avec Divi et Slick.js

FB

TW

In

Comment créer un Mega Menu avec Divi

TRUCS & ASTUCES

5. Créer un Méga Menu avec Divi(1ère partie)

Introduction

Table des Matières

Comment commencer?

Étape 1 : Configurer le Menu dans WordPress

Étape 2 : Ajouter une Classe CSS pour activer le Mega Menu

Étape 3 : Styliser le Mega Menu avec CSS

Étape 4 : Ajouter des Images ou des Icônes

Étape 5 : Adapter le Mega Menu pour Mobile

Étape 6 : Tester et Optimiser

Optimisation SEO ajoutée :

Conclusion

Prêt à démarrer votre projet ou besoin d’aide pour optimiser votre site internet ? Contactez-nous dès aujourd’hui pour obtenir un devis gratuit !

Articles similaires

Comment réaliser un carousel de produits Woocommerce avec Divi et Slick.js

Guide pour une création de site web qui allie économie et qualité – LDdigitalwork

LiteSpeed Cache : le Guide Complet

Restez connectés avec nos dernières News et Mises à jour

Joindre notre Newsletter

Merci de vous être abonné!

Suivez-Nous

0 commentaires

Soumettre un commentaire Annuler la réponse

Message de succès

Inscrivez-vous à notre Newsletter

You have Successfully Subscribed!