Comment créer un menu push coulissant vers le bas dans Divi

Les gros en-têtes avec de nombreux liens de navigation peuvent occuper beaucoup d'espace précieux sur votre site (en particulier au-dessus de la ligne de flottaison). C'est pourquoi les menus contextuels et coulissants deviennent de plus en plus populaires. La plupart du temps, les menus qui se glissent dans la vue restent au-dessus du contenu de la page, masquant certains éléments. Cependant, un menu push coulissant fonctionne un peu différemment. L'effet de poussée coulissante est unique en ce 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é de la vue.

Dans ce tutoriel, nous allons vous montrer comment créer un menu push coulissant à partir de zéro à l'aide du Divi Theme Builder. Une fois le menu construit, il devient un outil polyvalent pour tous types d'applications puisque vous pourrez remplir la section avec le contenu de votre choix à l'aide du Divi Builder.

Allons-y !

Aperçu

Voici un aperçu du menu push coulissant que nous allons construire dans ce tutoriel.

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 !

Pour importer la mise en page de la section dans votre Divi Theme Builder, accédez au Divi Theme Builder.

Cliquez sur l'icône de portabilité.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, le modèle de section apparaîtra dans le Divi Theme Builder.

Passons au tutoriel, voulez-vous ?

Construire le menu push coulissant avec le Divi Theme Builder

Création d'un nouveau menu global

Pour créer le menu, nous allons construire un nouvel en-tête global au sein du Divi Theme Builder.

Accédez à Divi > Générateur de thèmes.

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 « Créer un en-tête global ».

Cela vous amènera à l'éditeur de disposition d'en-tête global.

Une fois que vous êtes dans l'éditeur de disposition d'en-tête global, choisissez l'option « Créer à partir de zéro.

Création du menu Push

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 :

Fond

• Couleur d'arrière-plan : #1a1e36

Rembourrage

• Remplissage : 0px en haut, 0px en 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

CSS personnalisé (tablette)

Ensuite, nous devons ajuster la hauteur de la section sur mobile en utilisant une hauteur calculée pour s'adapter à la barre d'en-tête principale que nous ajouterons. Cela fera essentiellement en sorte que la section s'étende sur toute la hauteur de la fenêtre sur mobile lorsque l'utilisateur ouvre le menu.

Ajoutez le CSS personnalisé suivant à l'élément principal sur tablette uniquement :

height: calc(100vh - 70px);
overflow:scroll !important;
overscroll-behavior: contain;

Ajouter la ligne 1

Une fois les paramètres de section terminés, créez une ligne à une colonne dans la section.

Paramètres de la ligne 1

Mettez ensuite à jour les paramètres de ligne comme suit :

Concevoir

• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 1280px
• Rembourrage: haut 3vh, bas 3vh
• Largeur de la bordure inférieure : 1px
• 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 :

Sous le bureau…

display:flex;
justify-content:center;
align-items:center;

Sous tablette…

display:flex;
flex-direction:column;
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 de modules de boutons. Commencez par ajouter un nouveau bouton à la colonne.

Paramètres des boutons

Mettez ensuite à jour les paramètres des boutons comme suit :

Teneur

• Texte du bouton : Conception
• URL du lien du bouton : # (remplacez-le par votre propre URL personnalisée plus tard)

Concevoir

• Couleur du texte du bouton : #ffffff
• Largeur de la bordure du bouton : 0px
• Police des boutons : Montserrat
• Poids de la police du bouton : lourd
• Icône du bouton : [votre choix]
• Emplacement de l'icône du bouton : à gauche

Duplication de 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 rangée terminée, nous sommes prêts à ajouter une autre rangée de boutons qui peuvent être utilisés pour un ensemble différent d'éléments de menu.

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 en double.

Paramètres de la ligne 2

Mettez à jour les paramètres de la ligne 2 comme suit :

• Largeur maximale : 1080px
• Largeur de la bordure inférieure : 0px

Paramètres de colonne

Ajoutez ensuite une bordure à la colonne comme suit :

• Largeur de la 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
• Espacement des lettres des boutons : 2px
• Poids de la police du bouton : semi-gras
• Style de police des boutons : TT
• Afficher l'icône du bouton : NON

Dupliquer la colonne

Tout 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 de la bordure droite : 0px

Création de la barre d'en-tête principale

Ensuite, nous allons créer la section pour la barre d'en-tête principale. Cette barre d'en-tête restera toujours visible et contiendra le logo de notre site, un CTA et notre bouton de basculement 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 du menu poussoir ».

Créez ensuite une nouvelle section sous la première section.

Paramètres de section

Mettez maintenant à jour l'étiquette de la nouvelle section pour lire "Section d'en-tête". Ensuite, ouvrez les paramètres de la section et mettez à jour les éléments suivants :

Rembourrage

• Remplissage : 0px en haut, 0px en bas

Ajouter une rangée

Une fois le remplissage de la section ajouté, 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 : 70px

Rembourrage

• Remplissage : Remplissage : 0px en haut, 0px en 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 ligne.

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 de 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

Ensuite, ouvrez les paramètres de bouton pour le bouton en double et mettez à jour les éléments suivants :

• Texte du bouton : s'inscrire
• Taille du texte du bouton : 14 px
• Couleur du texte du bouton : #1a1e36
• Afficher l'icône du bouton : OUI
• Icône du bouton : flèche vers la droite (voir capture d'écran)

Ajouter un logo

Dans la colonne du milieu, ajoutez un module image. C'est ainsi que nous ajouterons le logo du site de manière dynamique.

Survolez la zone d'image et cliquez sur l'icône "Utiliser le contenu dynamique". Dans la liste déroulante, sélectionnez « Logo du site ».

Paramètres d'image

Ensuite, sous l'onglet Conception, mettez à jour les éléments suivants :

• Alignement de l'image : centre
• Hauteur maximale : 55 pixels

Ajouter une icône de hamburger personnalisée

Nous pourrions utiliser une icône ordinaire 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 stylisé avec du CSS externe.

Allez-y et ajoutez un module de texte à la colonne 3.

Ajouter un module de texte HTML

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>

Fond

Donnez une couleur d'arrière-plan au module de texte :

• Couleur d'arrière-plan : #1a1e36

Mise en forme du texte

Mettez ensuite à jour les paramètres de conception comme suit :

• Largeur : 70 pixels
• Alignement du module : à droite
• Hauteur : 70px
• Rembourrage : 20 pixels en haut, 20 pixels en bas, 16 pixels à gauche, 16 pixels à 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 push coulissant fonctionne, nous ajouterons nos CSS et jQuery personnalisés à un module de code.

Allez-y et ajoutez un module de code à la colonne 3 sous le module de texte.

Collez ensuite le code suivant (important : enveloppez ce code dans des balises de 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 du bouton

Enfin, nous pouvons mettre à jour tous les boutons avec le texte de bouton et les URL de lien nécessaires.

C'est ça!

Enregistrer les paramètres

N'oubliez pas d'enregistrer la mise en page et les paramètres du générateur de thème.

Résultat final

Pour voir le résultat final, consultez une page en direct sur votre site.

Le rendre collant

Si vous voulez une version "collante" du menu, il vous suffit d'ajouter l'extrait de code CSS suivant au module de code (entre les balises de style ) :

  header {
    position: sticky;
    top:0;
    z-index:9999;
  }
  #page-container {
    overflow-y: visible !important;
  }

Et voici le résultat.

Dernières pensées

J'espère que vous apprécierez ce menu push coulissant. L'effet est unique et ouvre la porte à des en-têtes plus créatifs sur la route.

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

À votre santé!