Comment créer un menu coulissant réactif avec le générateur de thème de Divi

Lors de la configuration d'un site Web pour un de vos clients, vous vous surprendrez à réfléchir au type d'en-tête à créer. La barre de menu horizontale en haut est la plus utilisée sur le Web, mais il existe également d'autres options, telles qu'un menu coulissant. Les menus coulissants vous aident à limiter l'espace occupé par l'en-tête global. Plutôt que d'afficher tous les éléments de votre menu dès le départ, vous pouvez laisser un menu coulissant apparaître lorsque vos visiteurs cliquent sur l'icône de hamburger dans le coin supérieur droit. L'utilisation d'un menu coulissant vous aide à ajouter une interaction supplémentaire à votre site Web.

Dans le didacticiel Divi du cas d'utilisation d'aujourd'hui, nous allons vous montrer comment en créer un à l'aide de Theme Builder de Divi, des éléments Divi intégrés et du code supplémentaire. La conception de ce menu coulissant correspond parfaitement au Yoga Instructor Layout Pack, mais vous êtes libre de le modifier pour qu'il corresponde à n'importe quel site Web que vous créez. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT le modèle d'en-tête global du menu contextuel réactif

Pour mettre la main sur le modèle d'en-tête global de menu coulissant gratuit, vous devez d'abord le télécharger à l'aide du 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 !

1. Accédez à Divi Theme Builder et commencez à créer un en-tête global

Aller à Divi Theme Builder

Commencez par accéder au Divi Theme Builder dans le backend de votre site WordPress et cliquez sur « Ajouter un en-tête global ».

Commencer à créer un en-tête global

Continuez en sélectionnant « Créer un en-tête global ».

2. Créer une conception d'en-tête

Paramètres de section

Couleur de l'arrière plan

Une fois dans l'éditeur de modèles, vous remarquerez une section. Ouvrez cette section et rendez la couleur d'arrière-plan transparente.

• Couleur d'arrière-plan : rgba(255,255,255,0)

Espacement

Passez à l'onglet Conception et supprimez tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Position

Ensuite, nous allons tourner la section fixe en allant dans l'onglet avancé et en modifiant les paramètres de position.

• Poste : fixe
• Emplacement : Centre supérieur

Ajouter la ligne n° 1

Structure des colonnes

Une fois que vous avez terminé les paramètres de la section, ajoutez une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Largeur : 97%
• Largeur maximale : 100 %

Espacement

Modifiez ensuite les paramètres d'espacement.

• Rembourrage supérieur : 1%
• Rembourrage inférieur : 0px

Élément principal

Ensuite, allez dans l'onglet avancé et ajoutez deux lignes de code CSS à l'élément principal de la ligne. Cela nous aidera à aligner verticalement le contenu de la colonne dans notre ligne.

display: flex;
align-items: center;

Ajouter un module d'image à la colonne 1

Télécharger le logo

Il est temps d'ajouter des modules, en commençant par un module image dans la colonne 1. Téléchargez votre logo.

Ajouter un module de texte à la colonne 3

Ajouter 3 étendues à la zone de contenu

Ensuite, passez à la troisième colonne et ajoutez un module de texte. Nous utiliserons l'onglet texte du module de texte pour ajouter trois plages HTML avec des classes personnalisées qui leur sont attribuées. Plus tard dans le didacticiel, nous utiliserons ces plages pour créer notre icône de hamburger interactive.

<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

Couleur de l'arrière plan

Modifiez ensuite la couleur d'arrière-plan du module.

• Couleur d'arrière-plan : rgba(0,0,0,0.04)

Paramètres de texte

Ensuite, passez à l'onglet Conception et supprimez la hauteur de la ligne de texte. Cela nous aidera à avoir un contrôle total sur les durées que nous avons ajoutées.

• Hauteur de la ligne de texte : 0em

Dimensionnement

Ensuite, nous allons modifier les paramètres de dimensionnement du module.

• Largeur : 120px
• Alignement du module : à droite

Espacement

Et nous allons compléter les paramètres du module en transformant le module en un carré à l'aide de valeurs de remplissage personnalisées dans les paramètres d'espacement.

• Rembourrage supérieur : 40 px
• Rembourrage inférieur : 60px
• Rembourrage gauche : 40 px
• Remplissage droit : 40px

Ajouter la ligne n° 2

Structure des colonnes

Au rang suivant ! Nous utiliserons cette ligne pour concevoir l'ensemble de notre menu coulissant. Utilisez la structure de colonnes suivante :

Couleur de l'arrière plan

Sans ajouter de modules, ouvrez les paramètres de ligne et modifiez la couleur d'arrière-plan comme suit :

• Couleur d'arrière-plan : #e7e0e2

Image de fond

Nous utilisons également une image de fond de motif. Vous pouvez trouver l'image que nous avons utilisée dans le dossier de téléchargement que vous avez pu télécharger au début de ce didacticiel, mais n'hésitez pas à utiliser tout autre motif d'arrière-plan de votre choix.

• Taille de l'image d'arrière-plan : taille réelle
• Position de l'image d'arrière-plan : Centre
• Répéter l'image d'arrière-plan : répéter

Dimensionnement

Ensuite, passez à l'onglet Conception et modifiez les paramètres de dimensionnement en conséquence :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 20 % (ordinateur de bureau), 40 % (tablette), 60 % (téléphone)
• Hauteur: 100vh

Espacement

Modifiez également les paramètres d'espacement sur différentes tailles d'écran.

• Rembourrage supérieur : 10 vw (ordinateur de bureau), 30 vw (tablette), 40 vw (téléphone)

Frontière

Et complétez les paramètres de ligne en ajoutant une bordure gauche.

• Largeur de la bordure gauche : 10px
• Couleur de la bordure gauche : #24394a
• Style de bordure gauche : double

Ajouter un module de texte à la colonne

Ajouter du contenu

Il est temps d'ajouter le premier élément de menu Module de texte ! Ajoutez la copie à la zone de contenu.

Ajouter un lien

Continuez en ajoutant un lien pertinent à l'élément de menu.

• URL du lien du module : #

Couleur de l'arrière plan

Modifiez ensuite la couleur d'arrière-plan.

• Couleur d'arrière-plan : rgba (216 210 212 0,35)

Paramètres de texte

Ensuite, passez à l'onglet Conception et modifiez les paramètres de texte comme suit :

• Police du texte : Domine
• Poids de la police de texte : gras
• Couleur du texte : #000000
• Taille du texte : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Alignement du texte : Centre

Espacement

Complétez les paramètres du module en ajoutant des valeurs d'espacement personnalisées sur différentes tailles d'écran.

• Marge inférieure : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage supérieur : 1vw
• Rembourrage inférieur : 1vw

Cloner le module de texte (1 module par élément de menu)

Une fois que vous avez terminé le premier élément de menu Module de texte, vous pouvez le cloner autant de fois que nécessaire. Assurez-vous simplement que vos modules ne dépassent pas la hauteur de la fenêtre.

Modifier le contenu et les liens des modules de texte en double

Modifiez le contenu et les liens de chaque module de texte en double.

Ajouter un module de bouton à la colonne

Ajouter une copie

Le dernier module dont nous avons besoin dans cette rangée est un module de bouton. Ajoutez une copie de votre choix.

Ajouter un lien

Ajoutez aussi un lien.

• URL du lien du bouton : #

Alignement

Passez à l'onglet Conception et modifiez l'alignement des boutons.

• Alignement des boutons : Centre

Paramètres des boutons

Continuez en stylisant le module de boutons comme suit :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 0.7vw (ordinateur de bureau), 1.5vw (tablette), 2.5vw (téléphone)
• Couleur du texte du bouton : #000000
• Couleur d'arrière-plan du bouton : rgba(0,0,0,0)
• Couleur de la bordure du bouton : #24394a
• Rayon de la bordure du bouton : 0px
• Espacement des lettres des boutons : 4px

• Police des boutons : Open Sans
• Poids de la police du bouton : gras
• Style de police des boutons : majuscules

Espacement

Et complétez les paramètres du module en ajoutant des valeurs d'espacement personnalisées sur différentes tailles d'écran.

• Marge supérieure : 5vw
• Rembourrage supérieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage inférieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage gauche : 1.8vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)
• Rembourrage droit : 1.8vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)

3. Ajouter une fonctionnalité coulissante

Ajouter un identifiant CSS au module de texte d'icône de menu

Maintenant que nous avons tous les éléments en place, il est temps de créer l'effet de menu coulissant réactif ! Tout d'abord, ouvrez le module de texte (contenant les plages) dans la troisième colonne de votre première ligne et utilisez un identifiant CSS personnalisé dans l'onglet avancé. Nous utiliserons cet identifiant CSS pour créer une fonction de clic dans notre code.

• ID CSS : ouverture coulissante

Ajouter la classe CSS à la ligne n°2

Ensuite, ouvrez la deuxième ligne, accédez à l'onglet avancé et ajoutez une classe CSS personnalisée. Au clic, nous permettrons à la ligne de glisser.

• Classe CSS : slide-in-menu-container

Changer le positionnement de la rangée n°2

Nous allons également repositionner cette ligne. Remarquez comment le décalage horizontal correspond à la largeur de la ligne sur différentes tailles d'écran dans les paramètres de dimensionnement.

• Position : Absolu
• Emplacement : en haut à droite
• Décalage horizontal : -20 % (ordinateur de bureau), -40% (tablette), -60% (téléphone)

Changer l'opacité de la ligne 2

Et amenez l'opacité à 0 dans un état par défaut.

opacity: 0;

Ajouter un module de code à la deuxième colonne de la première ligne

Insérer le code CSS

Pour créer l'effet de fonction de clic et styliser les étendues de notre icône de hamburger, nous aurons besoin de code CSS. Ajoutez un module de code à la deuxième colonne de votre première ligne et placez les lignes de code CSS suivantes entre les balises de style, comme vous pouvez le remarquer dans l'écran d'impression ci-dessous :

#slide-in-open{
cursor: pointer;
}

.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.line-2 {
top: 10px;
}

.line-3 {
top: 20px;
}

#slide-in-open.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

#slide-in-open.open .line-2 {
display: none;
}

#slide-in-open.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}

.slide-in-menu {
right: 0 !important;
opacity: 1 !important;
}

.slide-in-menu-container {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

Insérer le code JQuery

Nous devrons également ajouter du JQuery pour la fonction de clic. Assurez-vous de placer le code entre les balises de script comme vous pouvez le remarquer dans l'écran d'impression ci-dessous :

jQuery(function($){
$('#slide-in-open').click(function(){
$(this).toggleClass('open');
$('.slide-in-menu-container').toggleClass('slide-in-menu');
});
});

4. Enregistrer les modifications apportées au générateur de thème et afficher le résultat sur le site Web

Une fois que vous avez terminé tous les éléments de votre en-tête global, il ne vous reste plus qu'à enregistrer toutes les modifications et à afficher le résultat sur votre site Web !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment utiliser le générateur de thèmes de Divi pour créer un menu coulissant réactif pour votre prochain projet Divi. Nous avons combiné le meilleur des éléments et options intégrés de Divi avec un code de fonction de clic personnalisé. Cela vous permet de vous concentrer sur la conception du menu déroulant et de laisser le code prendre en charge la partie fonctionnelle de l'en-tête global ! Vous avez également pu télécharger le fichier JSON gratuitement. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.