Aimeriez-vous créer un menu coulissant et poussoir dans DIVI qui ne masque pas des éléments de votre page ?
Les grands en-têtes avec beaucoup de liens de navigation peuvent occuper de l’espace précieux sur votre site Web. C’est pourquoi les menus contextuels et coulissants deviennent de plus en plus populaires. La plupart du temps, les menus qui coulissent pour s’afficher restent au-dessus du contenu de la page, masquant certains éléments.
Cependant, un menu poussoir coulissant fonctionne un peu différemment. L’effet push coulissant est unique en ce sens que le menu glisse depuis le haut de la page tout en poussant simultanément le contenu de la page vers le bas afin que rien ne soit caché à la vue.
Dans ce tutoriel, nous allons vous montrer comment créer un menu poussoir coulissant à partir de zéro à l’aide de Divi Theme Builder.
Allons-y !
Aperçu
Voici un bref aperçu du menu poussoir coulissant que nous allons créer dans ce tutoriel.
Construire le menu poussoir coulissant avec le constructeur de thèmes Divi
Création d’un nouveau menu global
Pour créer le menu, nous allons créer un nouvel en-tête global au sein du Divi Theme Builder.
Accédez à Divi > Theme Builder.
Lire aussi : Comment créer un en-tête global avec formulaire de connexion dans DIVI
Cliquez ensuite sur la zone « Ajouter un en-tête global » dans le modèle de site Web par défaut. Dans la liste déroulante, sélectionnez « Construire l’en-tête global ».
Création du menu poussoir
Le premier élément que nous allons construire ensemble est la section du menu push. Cette section contiendra les éléments de menu qui basculeront vers le bas et vers le haut lorsque vous cliquerez sur le bouton de basculement du menu.
Paramètres de section
Ouvrez les paramètres de la section par défaut et mettez à jour les paramètres comme suit :
Arrière plan
- Fond : #1a1e36
Marge interne
- Marge interne : 0px Sommet, 0px Bas
Classe CSS
Sous l’onglet avancé, ajoutez la classe CSS suivante qui sera utilisée plus tard dans notre code JS.
- Classe CSS : et-push-menu
Ajouter la ligne 1
Une fois les paramètres de section définis, créez une ligne à une colonne dans la section.
Paramètres de la ligne 1
Ensuite, mettez à jour les paramètres de ligne comme suit :
Dimensionnement
- Utilisation personnalisée Largeur de Gouttière : OUI
- Espacement des colonnes : 1
- Largeur maximale : 100 %
- Largeur maximale : 1 280 pixels
Espacement
- Marge : Sommet 3vh, Bas 3vh
Bordure
- Largeur de la bordure inférieure : 1 px
- Couleur de la bordure inférieure : rgba(255,255,255,0.2)
CSS personnalisé
Sous l’onglet avancé, ajoutez le CSS personnalisé suivant à l’élément principal :
display:flex;
justify-content:center;
align-items:center;
Paramètres de colonne
Une fois les paramètres de ligne définis, ouvrez les paramètres de la colonne et ajoutez un extrait CSS personnalisé à l’élément principal :
display:flex;
align-items:center;
justify-content:center;Cela centrera le contenu de la colonne à la fois verticalement et horizontalement.
Ajouter un bouton
Nous sommes maintenant prêts à commencer à ajouter nos éléments de menu à l’aide du module Bouton. Commencez par ajouter un nouveau bouton à la colonne.
Consultez aussi notre guide sur: Comment créer un menu de navigation vertical dans DIVI
Paramètres des boutons
Ensuite, mettez à jour les paramètres du bouton comme suit :
Contenu
- Texte du bouton : Conception
- URL du lien du bouton : # (remplacez-la ultérieurement par votre propre URL personnalisée)
Style
- Utiliser des styles personnalisés pour Bouton : OUI
- Couleur du texte du bouton : #ffffff
- Bouton Largeur de la Bordure : 0 pixel
- Police Bouton : Montserrat
- Bouton Lumière tamisée : Lourd
- Bouton Icône : OUI
- Bouton Icône : [Votre choix]
- Seulement Afficher l’Icône sur le vol Stationnaire pour Bouton : NON
- Bouton le placement de l’Icône : à gauche
Dupliquer la colonne
Maintenant, pour créer les boutons supplémentaires pour le menu, nous pouvons dupliquer la colonne. Pour cette conception, dupliquons la colonne 4 fois pour nous donner un total de 5 éléments/boutons de menu dans une rangée de cinq colonnes.
Ajouter la ligne 2
Une fois la première ligne terminée, nous sommes prêts à ajouter une autre ligne de boutons pouvant être utilisée pour un ensemble différent d’éléments de menu.
Lire également : Comment ajouter un formulaire de contact à un en-tête global dans DIVI
Pour créer la ligne suivante, dupliquez la ligne 1.
Supprimer toutes les colonnes sauf une
Supprimez ensuite toutes les colonnes sauf une dans la ligne dupliquée.
Paramètres de la ligne 2
Mettez à jour les paramètres de la ligne 2 comme suit :
- Largeur maximale : 1 080 pixels
- Largeur de la bordure inférieure : 0px
Paramètres de colonne
Ajoutez ensuite une bordure à la colonne comme suit :
- Largeur bordure droite : 1px
- Couleur de la bordure droite : rgba(255,255,255,0.2)
Mettre à jour les paramètres du bouton
Une fois que la colonne a la bordure droite, ouvrez les paramètres du bouton et mettez à jour les éléments suivants :
- Taille du texte du bouton : 14 px
- Bouton Lumière tamisée : texte en gras
- Espacement des lettres Bouton : 2 px
- Bouton copier le style : TT
- Bouton Icône : NON
Dupliquer la colonne
Comme nous l’avons fait auparavant, dupliquons la colonne pour créer des boutons et des colonnes supplémentaires. Pour cette conception, dupliquons la colonne 3 fois pour nous donner un total de 4 boutons dans une rangée de 4 colonnes.
Suppression de la bordure de la dernière colonne
Puisque nous ne voulons pas que la dernière colonne ait la bordure droite, ouvrez les paramètres de la colonne 4 et mettez à jour la largeur de la bordure :
- Largeur bordure droite : 0px
Création de la barre d’en-tête principale
Ensuite, nous allons créer la section de la barre d’en-tête principale. Cette barre d’en-tête restera toujours visible et sera ce qui contient le logo de notre site, un appel à l’action et notre bouton bascule de menu.
Ajouter une section
Avant d’ajouter la nouvelle section, c’est une bonne idée de mettre à jour l’étiquette de la section précédente pour lire « Section Menu Push ».
Découvrez aussi : Comment créer un en-tête global avec le thème Builder dans DIVI
Créez ensuite une nouvelle section sous la première section.
Paramètres de section
Maintenant, mettez à jour l’étiquette de la nouvelle section pour lire « Section d’en-tête ». Ouvrez ensuite les paramètres de la section et mettez à jour les éléments suivants :
Espacement
- Marge interne : 0px Sommet, 0px Bas
Ajouter une rangée
Une fois la marge interne de section définie, ajoutez une ligne à trois colonnes à la section.
Paramètres de ligne
Ouvrez le paramètre de ligne et mettez à jour les éléments suivants :
Dimensionnement
- Largeur de gouttière : 1
- Largeur : 90 %
- Hauteur : 70 pixels
Espacement
- Marge interne : 0px Sommet, 0px Bas
CSS personnalisé
Sous l’onglet avancé, ajoutez le CSS personnalisé suivant à l’élément principal :
display:flex;
align-items:center;Cela centrera verticalement les colonnes dans la rangée.
Ajouter un bouton
Pour créer le CTA principal sur la section d’en-tête, nous pouvons utiliser un bouton de la deuxième rangée dans la section supérieure. Copiez le bouton de la colonne 1 de la ligne 2 de la section supérieure et collez-le dans la colonne 1 de la ligne de la section d’en-tête.
Mettre à jour les paramètres du bouton
Ouvrez ensuite les paramètres du bouton dupliqué et mettez à jour les éléments suivants :
- Texte du bouton : Inscription
- Taille du texte du bouton : 14 px
- Couleur du texte du bouton : #1a1e36
- Bouton Icône : OUI
- Bouton Icône : Flèche vers la droite (voir capture d’écran)
Ajouter un logo
Dans la colonne du milieu, ajoutez un module Image. Ce sera ainsi que nous ajouterons dynamiquement le logo du site.
Survolez la zone d’image et cliquez sur l’icône « Utiliser le contenu dynamique ». Dans le menu déroulant, sélectionnez « Logo du site ».
Paramètres des images
Ensuite, sous l’onglet Style, mettez à jour les éléments suivants :
- Alignement de l’image : centré
- Hauteur maximale : 55 pixels
Ajouter une icône de hamburger personnalisée
Nous pourrions utiliser une icône régulière via un module de présentation comme bascule de menu, mais pour ce didacticiel, j’ai pensé que nous ajouterions une bascule de menu personnalisée avec un effet de transition sympa.
Ajouter un module de texte
Pour créer l’icône de menu, nous utiliserons un module de texte avec du code HTML personnalisé qui sera stylé avec du CSS externe.
Allez-y et ajoutez un module de texte à la colonne 3.
Ajouter du code HTML au module de texte
Ajoutez ensuite le code HTML suivant au contenu du module de texte :
<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>
Arrière plan
Donnez au module de texte une couleur d’arrière-plan :
- Couleur de fond : #1a1e36
Mise en forme du texte
Ensuite, mettez à jour les paramètres de Style comme suit :
- Largeur : 70 pixels
- Alignement du module : à droite
- Hauteur : 70 pixels
- Marge interne : 20px Sommet, 20px Bas, 16px à Gauche, 16px à Droite
Classe CSS
Sous l’onglet avancé, ajoutez la classe CSS suivante :
- Classe CSS : et-push-menu-toggle
Ajouter un code
Pour ramener à la maison les fonctionnalités dont nous avons besoin pour que ce menu poussoir coulissant fonctionne, nous ajouterons notre CSS personnalisé et jQuery à un module Code.
Allez-y et ajoutez un module Code à la colonne 3 sous le module de texte.
Collez ensuite le code suivant (N.B. : enveloppez ce code dans des balises style pour qu’il fonctionne correctement) :
.line {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #ffffff;
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;
}
.et-push-menu-toggle.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.et-push-menu-toggle.open .line-2 {
display: none;
}
.et-push-menu-toggle.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.et-push-menu {
display:none;
}
.et-fb .et-push-menu {
display:block;
}
.et-push-menu-toggle {
cursor:pointer;
}
Ensuite, copiez et collez ce code directement en dessous (important : enveloppez ce code dans des balises de script pour qu’il fonctionne correctement) :
(function($) {
$(document).ready(function(){
$('.et-push-menu-toggle').click(function(){
$(this).toggleClass('open');
$('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
});
});
})( jQuery );
Mettre à jour le texte et les liens des boutons
Enfin, nous pouvons mettre à jour tous les boutons avec le texte de bouton et les URL de lien nécessaires.
C’est fait !
Enregistrer les paramètres
N’oubliez pas d’enregistrer la mise en page et les paramètres du Constructeur de thème.
Résultat final
Pour voir le résultat final, consultez la page sur votre site web.
Rendre Sticky
Si vous voulez une version « sticky » du menu, il vous suffit d’ajouter l’extrait de code CSS suivant au module code (entre les balises style ) :
header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
overflow-y: visible !important;
}
Et voici le résultat.
Télécharger DIVI Maintenant !!!
Conclusion
Nous espérons que vous apprécierez ce menu poussoir coulissant. L’effet est unique et ouvre la porte à des en-têtes plus créatifs. Si vous rencontrez un quelconque souci ou des suggestions, retrouvons nous dans la section commentaires pour en discuter.
Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.
Mais en attendant, partagez cet article sur vos différents réseaux sociaux.
…
