Envie de créer un menu latéral coulissant et responsive dans Divi ?

Lors de la création d’un site Web, vous vous demandez souvent quel type d’en-tête créer. La plus utilisée sur le Web est la barre de menu horizontale en haut, mais il existe également d’autres options, telles qu’un menu coulissant. 

Les menus coulissants vous aident le plus souvent à limiter l’espace occupé par l’en-tête global. Ainsi, vous pouvez laisser un menu coulissant apparaître lorsque vos visiteurs cliquent sur l’icône hamburger dans le coin supérieur droit. 

Par conséquent, l’utilisation d’un menu coulissant vous aide à ajouter une interaction supplémentaire à votre site Web.

Dans ce didacticiel, nous vous montrerons donc comment en créer un à l’aide de Thème Builder de Divi

Commençons !

Aperçu

Avant de nous plonger dans ce didacticiel, examinons d’abord le résultat que nous allons obtenir.

Accédez à Theme Builder et créez un en-tête global

Aller sur Theme Builder

Pour commencer, rendez-vous sur Theme Builder du menu Divi présent dans votre tableau de bord WordPress et cliquez sur « Ajouter un en-tête global ».

Créer l’en-tête global

Continuer en sélectionnant ‘Créer l’en-tête global’.

Créer un style d’en-tête

Paramètres de section

Couleur d’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 transparent.

  • Fond : rgba (255,255,255,0)

Espacement

Passer à l’onglet Style et supprimer toutes les marges inférieure et supérieure.

  • Marge interne Sommet : 0px
  • Marge interne Bas : 0px

Poste

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

  • Poste : Fixed
  • Location : En haut au centre

Ajouter la première ligne

Structure de la colonne

Une fois que vous avez terminé les paramètres de 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 maximale : 97 %
  • Largeur maximale : 100 %

Espacement

Modifiez les paramètres d’espacement.

  • Marge interne Sommet : 1 %
  • Marge interne Bas : 0px

Elé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 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.

créer un menu latéral coulissant et responsive dans Divi

Ajouter un module Texte à la colonne 3

Ajouter 3 espaces à la zone de contenu

<spanclass="line line-1"></span>

<spanclass="line line-2"></span>

<spanclass="line line-3"></span>

Couleur de l’arrière-plan

Modifiez la couleur de fond du module.

  • Fond : rgba (0,0,0,0.04)

Paramètres de texte

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

  • Hauteur de la ligne Texte : 0em

Dimensionnement

Nous allons modifier les paramètres de dimensionnement du module.

  • Largeur maximale : 120 pixels
  • Alignement du texte : à droite

Espacement

Et nous compléterons les paramètres du module en transformant le module en carré. Pour cela, nous allons utilisé des valeurs de remplissage personnalisées dans les paramètres d’espacement.

  • Marge interne Sommet : 40px
  • Marge interne Bas : 60px
  • Marge interne Gauche : 40px
  • Marge interne Droit : 40px

Ajouter la deuxième ligne

Structure de la colonne

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 :

  • Fond : #e7e0e2

Image de fond

Nous utilisons également une image d’arrière-plan à motif. Vous pouvez utiliser un 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 de Fond : Répétition

Dimensionnement

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

  • Utilisation Personnalisée Largeur de Gouttière : Oui
  • Espacement des colonnes : 1
  • Largeur maximale : 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.

  • Marge interne Sommet : 10 vw (ordinateur de bureau), 30 vw (tablette), 40 vw (téléphone)

Bordure

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

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

Ajouter un module Texte à la colonne

Ajouter du contenu

Il est temps d’ajouter le premier élément de menu Module 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 de module : #

Couleur de l’arrière-plan

Modifiez ensuite la couleur de fond.

  • Fond : rgba (216,210,212,0.35)

Paramètres du texte

Ensuite, passez à l’onglet Style’3 et modifiez les paramètres de texte comme suit :

  • Police du texte : Domine
  • Texte Lumière tamisée : Texte en gras
  • Couleur du texte Texte : #000000
  • Texte Taille du texte : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
  • Alignement du texte : Centré

Espacement

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

  • Marge Bas : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
  • Marge interne Sommet : 1vw
  • Marge interne Bas : 1vw

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

Une fois que vous avez terminé le premier module de texte de l’élément de menu, 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 Texte en double

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

Ajouter un module Bouton à la colonne

Ajouter une copie

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

Ajouter un lien

Ajoutez également un lien.

  • URL du lien du bouton : #

Alignement

Passez à l’onglet Style et modifiez l’alignement des boutons.

  • Alignement des boutons : centré

Paramètres du Bouton

Continuez en personnalisant le module Bouton comme suit :

  • Utiliser des styles personnalisés pour le bouton : Oui
  • Bouton Taille du Texte : 0,7 vw (ordinateur de bureau), 1,5 vw (tablette), 2,5 vw (téléphone)
  • Couleur du texte Bouton : #000000
  • Bouton Background : rgba (0,0,0,0)
  • Bouton Couleur de la Bordure : #24394a
  • Bouton Rayon des Frontières : 0 pixel
  • Espacement des lettres Bouton : 4px
  • Police Bouton : Open Sans
  • Bouton Lumière tamisée : Texte en gras
  • Bouton Copier le style : TT

Espacement

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

  • Marge Sommet : 5vw
  • Marge interne Sommet : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
  • Marge interne Bas : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
  • Marge interne Gauche : 1,8 vw (ordinateur de bureau), 3 vw (tablette), 4 vw (téléphone)
  • Marge interne Droite : 1,8 vw (ordinateur de bureau), 3 vw (tablette), 4 vw (téléphone)
créer un menu latéral coulissant et responsive dans Divi

Ajouter une fonctionnalité de coulissement

Ajouter un ID CSS au module de texte de l’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 responsive ! Tout d’abord, ouvrez le module Texte (contenant les étendues) dans la troisième colonne de votre première ligne et utilisez un ID CSS personnalisé dans l’onglet avancé. Nous utiliserons cet ID CSS pour créer une fonction de clic dans notre code.

  • ID CSS : slide-in-open

Ajouter une classe CSS à la ligne #2

Ensuite, ouvrez la deuxième ligne, accédez à l’onglet avancé et ajoutez une classe CSS personnalisée. Lors d’un clic, la ligne va glisser.

  • Classe CSS : slide-in-menu-container
créer un menu latéral coulissant et responsive dans Divi

Changer le positionnement de la ligne #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.

  • Poste : Absolu
  • Emplacement : En haut à droite
  • Décalage horizontal : -20 % (ordinateur de bureau), -40 % (tablette), -60 % (téléphone)
créer un menu latéral coulissant et responsive dans Divi

Modifier l’opacité de la ligne 2

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

opacity: 0;

Ajouter le module 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 portées 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: all0.5s ease !important;

-moz-transition: all0.5s ease !important;

-o-transition: all0.5s ease !important;

-ms-transition: all0.5s ease !important;

transition: all0.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');
});
});

Enregistrer les modifications du 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 !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d’œil au résultat.

Conclusion

En conclusion, dans cet article, nous vous avons montré comment utiliser le générateur de thèmes de Divi pour créer un menu coulissant responsive. Pour cela, nous avons combiné le meilleur des éléments et options intégrés de Divi avec un code de fonction de clic personnalisé. Ainsi, cela vous permet de vous concentrer sur la conception du menu coulissant et de laisser le code prendre en charge la partie fonctionnelle de l’en-tête global ! 

Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire dans la section des commentaires ci-dessous.