Comment créer un menu de hamburgers animé par échelonnement avec Divi & Anime.js

Dans le passé, nous avons partagé différents types d'en-têtes que vous pouvez créer avec Divi et le Divi Theme Builder. En fait, vous pouvez trouver tous ces tutoriels répertoriés dans cet article de navigation. Dans cet article, vous remarquerez que nous vous avons montré comment créer un en-tête en plein écran, mais pour vous aider à aller encore plus loin dans la conception de votre en-tête, nous vous montrerons également comment créer un menu de hamburger animé personnalisé. Il y a quelques choses notables sur le menu de hamburgers que nous allons créer :

• Dès que les visiteurs cliquent sur l'icône du hamburger, un en-tête plein écran apparaîtra et chaque élément de menu se révélera un par un, lui donnant une apparence et une sensation animées personnalisées.
• Les animations personnalisées sont déclenchées à chaque ouverture du menu
• Vous pourrez également ajouter des éléments de liste déroulante aux éléments du menu principal, ceux-ci s'ouvrent en cliquant et se ferment automatiquement dès que quelqu'un ferme le menu ou clique sur un élément de navigation

En d'autres termes, il s'agit certainement d'un didacticiel d'en-tête qui vous aidera à ajouter cette apparence avancée à votre site Web. Vous pouvez également styliser les éléments comme vous le souhaitez et télécharger gratuitement le fichier modèle JSON !

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

Pour mettre la main sur le modèle d'en-tête global gratuit, vous devrez d'abord les 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 !

1. Créer un nouveau modèle d'en-tête

Accédez à Divi Theme Builder et ajoutez un nouveau modèle d'en-tête global

Commencez par vous rendre sur le Divi Theme Builder. Un là, ajoutez un nouvel en-tête global.

Commencez à construire à partir de zéro

Et commencez à créer la conception de l'en-tête à partir de zéro.

2. Créer un logo et une icône de hamburger

Paramètres de section

Couleur de l'arrière plan

Une fois dans l'éditeur de modèles, nous commencerons par créer le logo et l'icône du hamburger. Vous remarquerez qu'il y a déjà une section là-bas. Ouvrez les paramètres de la section et appliquez une couleur d'arrière-plan transparente.

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

Espacement

Passez à l'onglet de conception de la section et supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

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

Position

Ensuite, allez à l'avancée et tournez la section fixe.

• Poste : fixe
• Emplacement : en haut à gauche
• Indice Z : 13

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne, 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
• Égaliser les hauteurs de colonne : Oui
• Largeur : 95%
• Largeur maximale : 100 %

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

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

Élément principal CSS

Et pour nous assurer que le logo et l'icône du hamburger apparaissent l'un à côté de l'autre sur des écrans plus petits, nous insérons une ligne de code CSS dans l'élément principal de la ligne.

display: flex;

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 un logo de votre choix.

Dimensionnement

Passez à l'onglet Conception et modifiez ensuite les paramètres de dimensionnement.

• Largeur maximale:
  • Bureau : 80px
  • Tablette et téléphone : 50px

Position

Ensuite, repositionnez l'ensemble du module.

• Position : Absolu
• Emplacement : en haut à gauche
• Décalage vertical : 20px

Ajouter un module de texte à la colonne 3

Structure HTML dans la zone de contenu

Dans la troisième colonne, nous allons ajouter un module de texte. Nous utiliserons ce module de texte pour créer notre icône de hamburger. Commencez par basculer sur l'onglet texte dans la zone de contenu et insérez les balises HTML suivantes :

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

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement du module.

• Largeur : 80px
• Hauteur : 80px

Espacement

Ensuite, appliquez des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur :
  • Bureau : 10px
  • Tablette et téléphone : 17 pixels
• Rembourrage inférieur :
  • Bureau : 10px
  • Tablette et téléphone : 17 pixels
• Rembourrage gauche :
  • Bureau : 15 pixels
  • Tablette et téléphone : 30 px
• Rembourrage droit :
  • Bureau : 15 pixels
  • Tablette et téléphone : 10 pixels

Position

Repositionnez également ce module.

• Position : Absolu
• Emplacement : coin supérieur gauche

3. Construisez un menu de hamburgers

Ajouter une nouvelle section

Fond dégradé

Maintenant que nous avons le logo et l'icône du hamburger en place, nous pouvons passer à la partie suivante qui est consacrée à la construction du menu du hamburger et de tous ses éléments. Commencez par ajouter une nouvelle section, ouvrez les paramètres de la section et appliquez un arrière-plan dégradé.

• Couleur 1 : #000000
• Couleur 2: #111111
• Type de dégradé : Linéaire
• Direction du gradient : 90 degrés
• Position de départ : 50 %
• Position finale : 50 %

Dimensionnement

Appliquez ensuite une hauteur minimale et une hauteur maximale aux paramètres de dimensionnement.

• Hauteur minimale : 100 vh
• Hauteur maximale : 100 vh

Espacement

Ensuite, supprimez tout le rembourrage supérieur et inférieur de la section par défaut.

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

Débordements

Modifiez également les débordements.

• Débordement horizontal : masqué
• Débordement vertical : automatique

Position

Pour nous assurer que le menu peut être ouvert à tout moment, nous allons repositionner la section dans l'onglet avancé.

• Poste : fixe
• Emplacement Haut Centre

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne, passez à l'onglet Conception et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

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

Débordements

Ensuite, allez dans l'onglet avancé et modifiez les débordements.

• Débordement horizontal : masqué
• Débordement vertical : automatique

Position

Repositionnez également la ligne.

• Position : Absolu
• Emplacement Haut Centre

Paramètres de la colonne 1

Espacement

Ensuite, nous allons ouvrir les paramètres de la colonne 1 de notre ligne et appliquer des valeurs de remplissage réactif personnalisées.

• Rembourrage supérieur :
  • Bureau : 24vh
  • Tablette et téléphone : 10vh
• Rembourrage inférieur :
  • Bureau : 24vh
  • Tablette et téléphone : 5vh
• Rembourrage gauche : 13 %
• Rembourrage droit : 13 %

Frontière

Nous appliquerons également certains paramètres de bordure :

• Largeur de la bordure droite :
  • Bureau : 2px
  • Tablette et téléphone : 0px\
• Couleur de la bordure droite : 191919
• Largeur de bordure inférieure :
  • Bureau : 0px
  • Tablette et téléphone : 2px
• Couleur de la bordure droite : 191919

Paramètres de la colonne 2

Espacement

Ensuite, nous passerons à la colonne 2 et y appliquerons également des valeurs de remplissage personnalisées.

• Rembourrage supérieur :
  • Bureau : 24vh
  • Tablette et téléphone : 5vh
• Rembourrage inférieur :
  • Bureau : 24vh
  • Tablette et téléphone : 5vh
• Rembourrage gauche : 13 %
• Rembourrage droit : 13 %

Ajouter le module de texte n° 1 à la colonne 1

Ajouter du contenu H3

Il est temps d'ajouter des modules, en commençant par un premier module de texte dans la colonne 1. Ajoutez du contenu H3 de votre choix.

Paramètres de texte H3

Passez à l'onglet Conception et modifiez les paramètres de texte H3 comme suit :

• Police de la rubrique 3 : Montserrat
• Titre 3 Poids de la police : Ultra gras
• Titre 3 Style de police : majuscule
• Titre 3 Couleur du texte : #ffffff
• Titre 3 Taille du texte
  • Ordinateur de bureau : 1vw
  • Tablette : 2.5vw
  • Téléphone : 3.5vw
• En-tête 3 Espacement des lettres : 5px

Espacement

Ajoutez ensuite une marge inférieure.

• Marge inférieure : 5vh

Cloner le module de texte et placer le doublon dans la colonne 2

Une fois que vous avez terminé ce premier module, vous pouvez le cloner une fois et placer le doublon dans la colonne 2.

Modifier le contenu

Assurez-vous de modifier le contenu de ce module en double.

Ajouter le module de texte n° 2 à la colonne 2

Structure HTML dans la zone de contenu

Pour présenter nos éléments de menu, y compris les éléments de sous-menu, nous utiliserons l'onglet texte d'un nouveau module de texte. Allez-y et ajoutez un nouveau module de texte à la colonne 1 et insérez le code HTML suivant :

<span style="color: #686868;">01—</span> <a href="#">Services</a> <span class="toggle-sub-menu" style="color: #ffff00;">+</span>
<ul>
	<li><a href="#">Web design</a></li>
	<li><a href="#">Branding</a></li>
</ul>

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte comme suit :

• Police du texte : Montserrat
• Poids de la police de texte : fin
• Couleur du texte : #ffffff
• Taille du texte:
  • Ordinateur de bureau : 2,7 vw
  • Tablette : 4vw
  • Téléphone : 6vw
• Espacement des lettres du texte : 0,1 em
• Hauteur de la ligne de texte : 1 em

Paramètres de texte de lien

Modifiez également la couleur du texte du lien.

• Couleur du texte de ligne : #ffffff

Paramètres de texte de liste non ordonnée

Ensuite, modifiez les paramètres de texte de la liste non ordonnée.

• Police de la liste non ordonnée : Montserrat
• Poids de la police de la liste non ordonnée : gras
• Style de police de liste non ordonnée : majuscule
• Taille du texte non ordonné :
  • Ordinateur de bureau : 1vw
  • Tablette : 2.5vw
  • Téléphone : 3.5vw
• Hauteur de la ligne de liste non ordonnée : 1,5 em
• Type de style de liste non ordonné : aucun
• Position de style de liste non ordonnée : à l'intérieur

Espacement

Et complétez les paramètres du module en ajoutant des rembourrages haut et bas personnalisés.

• Rembourrage supérieur : 5 %
• Rembourrage inférieur : 5 %

Cloner le module de texte pour créer une variation sans sous-menu

Une fois que vous avez terminé le premier module, vous pouvez le cloner une fois. Nous utiliserons cette duplication pour créer une variante de l'élément de menu sans éléments de sous-menu.

Laisser de côté le sous-menu et l'icône de basculement

Pour transformer ce module en double en un élément de menu normal sans éléments de sous-menu, utilisez plutôt cette structure HTML :

<span style="color: #686868;">03—</span> <a href="#">Contact</a>

Réutiliser les deux types d'éléments de menu

Une fois que vous avez mis en place les deux variantes des éléments de menu, vous pouvez les réutiliser en conséquence en les clonant et en modifiant le contenu.

Ajouter le module de texte n° 2 à la colonne 2

Ajouter du contenu H4 et paragraphe à la zone de contenu

Dans la colonne 2, nous ajouterons un autre module de texte avec du contenu H4 et paragraphe de notre choix.

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :

• Police du texte : Alata
• Couleur du texte : #cecece
• Taille du texte:
  • Ordinateur de bureau : 0.8vw
  • Tablette : 2.4vw
  • Téléphone : 3.4vw
• Espacement des lettres du texte : 1px
• Hauteur de la ligne de texte : 1,5 em
• Couleur du texte : clair

Paramètres de texte H4

Apportez également quelques modifications aux paramètres de texte H4.

• Titre 4 Taille du texte :
  • Ordinateur de bureau : 1vw
  • Tablette : 3vw
  • Téléphone : 4vw

Dimensionnement

Ensuite, modifiez la largeur du module dans les paramètres de dimensionnement.

• Largeur : 48 %

Élément principal CSS

Et ajoutez une ligne de code CSS à l'élément principal du module. Cette ligne de code CSS nous aidera à placer deux modules de texte l'un à côté de l'autre.

display: inline-block;

Cloner le module de texte #2

Modifier la copie

Une fois que vous avez terminé le module de texte, vous pouvez le cloner une fois et modifier le contenu en conséquence.

Ajouter le module de suivi des médias sociaux à la colonne 2

Ajouter des réseaux sociaux de choix

Le dernier module dont nous avons besoin dans cette conception est un module de suivi des médias sociaux dans la colonne 2. Ajoutez les réseaux sociaux de votre choix.

Supprimer la couleur d'arrière-plan de chaque réseau social individuellement

Supprimez la couleur de fond de chaque réseau social individuellement.

Espacement

Ensuite, revenez aux paramètres généraux du module et appliquez une marge supérieure.

• Marge supérieure : 5vh

4. Ajouter des fonctionnalités

Ajouter une classe CSS au module de texte d'icône de hamburger

Maintenant que les bases de la conception de notre menu de hamburgers ont été posées, nous pouvons maintenant nous concentrer sur l'ajout de fonctionnalités ! La première chose à faire est d'ouvrir le module de texte contenant l'icône hamburger et d'ajouter la classe CSS suivante :

• Classe CSS : pleine largeur ouverte

Ajouter la classe CSS à la section #2

Ensuite, ouvrez la section du menu hamburger, section #2, et ajoutez la classe CSS suivante :

• Classe CSS : menu complet

Ajouter une classe CSS à chaque module dans le menu pleine largeur

Pour créer l'effet d'animation de décalage personnalisé, nous devrons appliquer la classe CSS suivante à chaque module de la section #2.

• Classe CSS : effet de décalage

Ajouter une classe CSS supplémentaire aux éléments de menu

Ajoutez également une classe CSS supplémentaire, appelée "main-menu-item", à chacun des éléments de menu de la colonne 1.

• Classe CSS : élément de menu principal à effet décalé

Ajouter un module de code à la section 1

Pour appliquer la fonctionnalité, nous utiliserons du code CSS et JQuery personnalisé. Nous placerons ce code dans un nouveau module de code dans la deuxième colonne de notre ligne dans la section #1.

Insérer le code CSS

Ajoutez le code CSS suivant au module de code entre les balises de style, comme vous pouvez le remarquer dans l'écran d'impression ci-dessous.

/* enable class below once you're done editing the menu */

/*
.fullwidth-menu {
opacity: 0;
top: 0vh;
visibility: hidden;
}
*/

.line{
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
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;
}

.fullwidth-open.open .line{
background: white; 
}

.line-1 {
top: 15px;    
}
  
.line-2 {
top: 25px;
width: 80%;
}
 
.line-3 {
top: 35px;
width: 50%;
}
 
.fullwidth-open.open .line-1 {
top: 25px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
 
.fullwidth-open.open .line-2 {
display: none;
}
 
.fullwidth-open.open .line-3 {
top: 25px;
width: 100%;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
 
.fullwidth-menu-open {
opacity: 1 !important;
top: 0 !important;
visibility: visible !important;
}
 
.fullwidth-menu {
-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;
}
  
.main-menu-item ul {
display: none; 
padding: 0;
margin-top: 50px;
}
  
.toggle-sub-menu {
cursor: pointer;
}

Insérer la bibliothèque Anime.js

Continuez en ajoutant la bibliothèque Anime JavaScript en utilisant des balises de script comme vous pouvez le voir dans l'écran d'impression ci-dessous . Nous utiliserons cette bibliothèque géniale pour créer l'effet de décalage dans la prochaine étape du didacticiel.

• src = "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"

Insérer le code JQuery

Les fonctionnalités de clic dans notre menu hamburger sont alimentées par le code JQuery suivant. Assurez-vous de placer ce code entre les balises de script comme vous pouvez le voir dans l'écran d'impression ci-dessous.

jQuery(function($){
$(document).ready(function(){  

// All variables needed in functions  
var menuSection = $('.fullwidth-menu');
var hamburgerIcon = $('.fullwidth-open');
var menuLink = $('.fullwidth-menu a');
var subMenu = $('.main-menu-item ul');
var toggleIcon = $('.toggle-sub-menu');
  
  
// Open fullwidth menu & animate items  
hamburgerIcon.click(function(){
	$(this).toggleClass('open');
	menuSection.toggleClass('fullwidth-menu-open');
	if (menuSection.hasClass("fullwidth-menu-open")) {
		anime({
  		targets: '.stagger-effect',
  		translateY: [150, 0],
  		opacity: [0, 1],
  		loop: false,
  		delay: anime.stagger(100, {easing: 'easeOutQuad'})
		});

	} else { 
		subMenu.slideUp();  
		toggleIcon.text($(this).text() == '+' ? '-' : '+');  
	}
});

// Close fullwidth menu when clicking an item
menuLink.click(function(){
	hamburgerIcon.toggleClass('open');
	menuSection.toggleClass('fullwidth-menu-open');  
  subMenu.slideUp();  
	toggleIcon.text($(this).text() == '+' ? '-' : '+');  
});
  
// Change icon when toggling the submenu  
toggleIcon.click(function(){  
	var subMenu = $(this).parent().find("ul");
	subMenu.slideToggle(); 
	$(this).text($(this).text() == '-' ? '+' : '-'); 
});  
  
});
});

Activez la classe CSS dès que vous avez terminé votre conception d'en-tête plein écran

Enfin, nous allons activer une classe CSS dans le module de code que vous pouvez trouver dans la première section. Ouvrez le module de code et supprimez le "/* */" au début et à la fin de la classe. L'activation de cette classe (en combinaison avec du code JQuery déjà activé) garantira que la section contenant les éléments de menu ne se charge pas immédiatement lorsque quelqu'un visite l'une de vos pages. Une fois que vous avez activé cette classe, la deuxième section de votre page disparaîtra de Visual Builder, mais vous pouvez toujours y accéder en mode filaire ou désactiver la classe CSS si vous souhaitez apporter des modifications supplémentaires.

5. Enregistrer les modifications apportées à l'en-tête et au générateur de thème

C'est ça! Il ne vous reste plus qu'à enregistrer le modèle et Divi Theme Builder et à visualiser 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 faire preuve de créativité avec votre en-tête Divi. Plus précisément, nous vous avons montré comment créer un menu de hamburgers animé sur mesure. Dès qu'un visiteur clique sur l'icône du hamburger, un menu en plein écran apparaît et révèle les éléments du menu un par un, ce qui se traduit par une belle expérience utilisateur. Vous avez également pu télécharger le fichier modèle JSON gratuitement ! Si vous avez des questions, 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.