Comment créer un bouton de menu déroulant à l'aide du module de menu pleine largeur de Divi

Un bouton de menu déroulant peut être très utile lors de la conception d'un site Web. Outre le menu principal, certaines zones d'un site peuvent nécessiter un menu déroulant de sous-éléments. Nous les voyons être utilisés pour des choses comme les catégories de billets de blog, les listes et les entrées de formulaire. Mais ils peuvent même être utilisés pour un appel principal à l'action.

Dans ce tutoriel, nous allons vous montrer comment créer un bouton de menu déroulant à l'aide du module de menu pleine largeur de Divi. Pour ce faire, nous allons d'abord créer un menu dans WordPress. Ensuite, nous utiliserons le module de menu pleine largeur de Divi pour afficher ce menu avec des styles personnalisés à l'aide du constructeur Divi et d'un peu de CSS personnalisé. Le résultat est un bouton de menu déroulant à la fois pratique et élégant.

Commençons.

Aperçu

Voici un bref aperçu du bouton du menu déroulant que nous allons construire dans ce tutoriel.

Bureau (menu déroulant au survol)

Tablette et téléphone (menu déroulant au clic)

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Abonnez-vous à notre chaîne Youtube

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder. Le CSS personnalisé a été ajouté à un module de code dans une section distincte au bas de la mise en page.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, si vous ne l'avez pas encore fait, installez et activez le Divi Theme installé (ou le Divi Builder Plugin si vous n'utilisez pas le Divi Theme). Nous utiliserons le constructeur Divi sur le front-end pour concevoir le bouton du menu déroulant.

C'est ça!

Créer un menu dans WordPress

Avant de commencer à construire le menu déroulant avec le Divi Builder, nous devons d'abord créer un menu WordPress que nous aimerions utiliser pour le module de menu pleine largeur. Pour ce faire, accédez au tableau de bord WordPress et accédez à Apparence > Menus. Créez ensuite un nouveau menu en cliquant sur le lien Créer un nouveau menu, en saisissant un nom de menu et en cliquant sur le bouton « Créer un menu ».

Pour l'instant, vous pouvez créer des liens personnalisés avec "#" comme espace réservé d'URL avec le texte du lien.

Structurez les éléments de menu de sorte que l'élément de menu de niveau supérieur ait le texte de lien « En savoir plus » avec trois éléments de sous-menu en dessous.

Après cela, assurez-vous d'enregistrer le menu.

Comment créer un bouton de menu déroulant avec le module de menu pleine largeur de Divi

Une fois le menu créé, nous pouvons commencer à concevoir le bouton du menu déroulant avec Divi. Pour démarrer, créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Création du contenu fictif

Tout d'abord, ajoutez une ligne d'une colonne à la section régulière par défaut.

Ajouter un module de texte

Ajoutez ensuite un module de texte à la ligne avec le contenu suivant :

<h1>Dropdown Menu Button</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Après cela, mettez à jour les paramètres de conception comme suit :

Remplissage de section

Ensuite, mettez à jour le paramètre de section avec les éléments suivants :

• Remplissage : 0px en bas

Espacement et bordure des lignes

Une fois le remplissage de la section mis à jour, ouvrez les paramètres de la ligne et donnez à la ligne un remplissage et une légère bordure.

• Rembourrage : 10vw haut, 10vw bas, 5vw gauche, 5vw droite
• Largeur de la bordure : 1px

Création du bouton de menu déroulant

Afin de créer le bouton de menu déroulant, nous utiliserons un module de menu pleine largeur. Cela nous permettra d'ajouter le menu que nous avons créé plus tôt.

Ajout du menu pleine largeur

Pour créer le module de menu pleine largeur, ajoutez une nouvelle section pleine largeur sous la section normale actuelle.

Ajoutez ensuite un module de menu pleine largeur à la ligne.

Dans la fenêtre contextuelle des paramètres du menu pleine largeur (sous contenu), utilisez la liste déroulante pour sélectionner le menu que vous souhaitez afficher. Cela devrait être le même menu que nous avons créé précédemment nommé « menu déroulant des boutons ».

Retirez ensuite la couleur de fond blanc par défaut pour le menu.

Une fois que vous avez ajouté le menu avec le module de menu pleine largeur, enregistrez les paramètres. Nous reviendrons un peu sur ce module pour finir le design. Mais pour l'instant, nous allons ajouter un arrière-plan à la section pleine largeur.

Mettre à jour la conception de la section pleine largeur

Ouvrez les paramètres de la section pleine largeur et mettez à jour les éléments suivants :

• Couleur d'arrière-plan du dégradé de gauche : #0047d6
• Dégradé d'arrière-plan à droite : #45b2ff

• Largeur maximale : 240 pixels
• Alignement de la section : centre

Je règle la largeur maximale de la section sur 240px car cela correspondra à la largeur de la largeur du menu déroulant par défaut dans Divi. C'est aussi une bonne taille pour un bouton sur le bureau et le mobile.

• Coins arrondis : 5px

Sous l'onglet avancé, ajoutez la classe CSS, le débordement et l'index Z suivants.

• Classe CSS : bouton déroulant
• Débordement horizontal : visible
• Débordement vertical : visible
• Indice Z : 14

La classe CSS est nécessaire pour que nous puissions cibler notre CSS externe sur cette section uniquement plus tard. Le débordement doit être défini sur visible afin que nous puissions voir le menu déroulant. Et l'index Z aidera à garder la liste déroulante au-dessus de tout autre contenu de la page.

Concevoir le menu Fulwidth

Nous sommes maintenant prêts à concevoir le module de menu pleine largeur. Ouvrez les paramètres du module de menu pleine largeur et mettez à jour les éléments suivants :

• Créer des liens de menu pleine largeur : OUI
• Couleur du texte du menu déroulant : #ffffff
• Couleur du texte du menu mobile : #ffffff
• Alignement du texte : Centre
• Couleur d'arrière-plan du menu déroulant : #45b2ff
• Couleur de la ligne du menu déroulant : #ffffff
• Couleur d'arrière-plan du menu mobile : #45b2ff

• Police de menu : Encoder Sans Semi Condensed
• Poids de la police du menu : semi-gras
• Couleur du texte du menu : #ffffff
• Taille du texte du menu : 16px
• Espacement des lettres du menu : 2px
• Animation du menu déroulant : développer

Positionnement du bouton déroulant

Pour que le bouton chevauche la bordure inférieure, nous devons ajouter une marge supérieure négative exactement la moitié de la hauteur du bouton.

• Marge : -40,5px haut

Presque là

Voici le résultat à ce jour…

Comme vous pouvez le voir, l'espace de survol n'occupe pas encore toute la zone des boutons et le menu déroulant est toujours à droite. Pour résoudre ce problème, nous pouvons ajouter du CSS personnalisé.

Ajout de CSS personnalisé

Avant d'ajouter le CSS personnalisé, assurez-vous que l'ID CSS "bouton déroulant" a été ajouté à la section pleine largeur (pas au module).

Sans l'ID CSS, le CSS ci-dessous ne fonctionnera pas.

Pour ajouter le CSS personnalisé, ouvrez les paramètres de la page et collez le code suivant dans la zone de saisie CSS personnalisé.

.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav > ul {
  padding-top: 0px !important;
}

.dropdown-button .fullwidth-menu li > a {
  padding-bottom: 0px;
  line-height: 81px;
}

.dropdown-button .fullwidth-menu li li a {
  padding: 6px 0px;
  line-height: 1.6em;
}

.dropdown-button .et_mobile_menu li a:hover, .nav ul li a:hover, .dropdown-button .fullwidth-menu a:hover {
  opacity: 1;
}

.dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {
  padding: 0 0 !important;
}

.dropdown-button .fullwidth-menu li {
  display: block;
}

.dropdown-button .fullwidth-menu .menu-item-has-children > a:first-child:after {  
  right: 20px;
}

Voici le résultat final

Personnaliser le menu sur mobile

À l'heure actuelle, le menu recourra à la version mobile avec l'icône de hamburger cliquable qui permet d'ouvrir et de fermer le menu mobile. Voici à quoi cela ressemble.

Pour corriger le menu afin qu'il corresponde à la version de bureau, nous devons ajouter du CSS personnalisé. Ouvrez les paramètres de la page et ajoutez le CSS personnalisé suivant juste sous le CSS que nous avons ajouté actuellement.

@media (max-width: 981px){
  .dropdown-button .et_pb_fullwidth_menu .et_pb_row {
    width: 100%;
    }
  .dropdown-button .mobile_menu_bar {
    height: 81px;
  }
  .dropdown-button .mobile_menu_bar:before {
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #ffffff!important;
    letter-spacing: 2px !important;
    content: "Learn More";
    line-height: 81px;
    top: 0px;
}
  .dropdown-button .mobile_menu_bar:after{
    position: absolute;
    line-height: 81px;
    font-family: ETmodules;
    font-size: 20px;
    font-weight: 800;
    content: "3";
    padding-left: 20px;
    color: #ffffff;
}   
  .dropdown-button .et_first_mobile_item > a {
    display: none;
  }

}

Le CSS ci-dessus fait que la zone cliquable s'étend sur toute la largeur et la hauteur de la section/du bouton. Il remplace également l'icône du hamburger par du texte et une icône de flèche qui correspond à la version de bureau. Cela se fait en utilisant les pseudo-éléments :before et :after. De cette façon, nous pouvons conserver la fonctionnalité par défaut du menu mobile en place.

À l'heure actuelle, le contenu textuel du bouton déroulant mobile indique « En savoir plus ». Mais nous pouvons changer cela en mettant à jour la ligne de CSS suivante sous le pseudo-élément :before pour la barre de menu mobile :

content: "Learn More";

Par exemple, si vous vouliez qu'il lise "Menu", vous changeriez la ligne de CSS comme suit :

content: "Menu";

Résultat final

Voici le résultat final.

Bureau (menu déroulant au survol)

Tablette et téléphone (menu déroulant au clic)

Sous-éléments supplémentaires

Et vous pouvez même ajouter des éléments de sous-menu ! Mettez simplement à jour le menu sur la page de l'éditeur de menu et vous êtes prêt.

Dernières pensées

La création d'un bouton de menu déroulant à l'aide du module de menu pleine largeur de Divi implique quelques étapes clés. Tout d'abord, nous créons le menu dans WordPress que nous voulons intégrer dans le module. Ensuite, nous utilisons le constructeur Divi pour styliser le module de menu pleine largeur à notre guise. Ensuite, nous ajoutons du CSS personnalisé pour peaufiner le design à la fois sur le bureau et sur le mobile. Le résultat est un menu déroulant magnifique (et utile) qui se déploie au survol pour le bureau et au clic pour le mobile. Espérons que vous trouverez cela un ajout utile à votre boîte à outils de conception.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!