Comment créer un menu collant extensible en survol avec Divi

Chaque semaine, nous vous proposons de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l'un des packs de mise en page, nous partageons également un cas d'utilisation qui vous aidera à faire passer votre site Web au niveau supérieur.

Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment créer un menu collant extensible en survol à l'aide du Mechanic Layout Pack de Divi. Nous traiterons deux exemples de conception différents que vous pouvez recréer à partir de zéro et appliquer à tout type de site Web que vous créez ! Le menu sera affiché au survol sur les tailles d'écran de bureau et activé en cliquant sur les appareils mobiles.

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.

Exemple 1

Bureau

Mobile

Exemple #2

Bureau

Mobile

Étapes générales

Désactiver la navigation fixe

Allez dans les options du thème Divi

Nous allons commencer par quelques étapes générales. Ces étapes sont les mêmes pour les deux exemples et sont nécessaires pour obtenir le résultat souhaité.

Si vous prévoyez d'utiliser un menu persistant en expansion au bas de votre page, vous souhaiterez peut-être omettre la barre de menu principale en haut. Pour ce faire, vous devrez vous rendre dans les options du thème de Divi.

Désactiver la navigation fixe

Là, vous voudrez désactiver l'option de barre de navigation fixe pour vous assurer qu'il ne reste aucun espace en haut de votre page.

• Barre de navigation fixe : désactivée

Masquer la barre de menus principale sur la page

Ouvrir les paramètres de la page

Passez à la page à laquelle vous souhaitez ajouter le menu persistant et ouvrez les paramètres de la page.

Ajouter un CSS personnalisé

Masquez le menu principal en ajoutant les lignes de code CSS suivantes à votre page.

#main-header {
display: none;
}

Ajouter une nouvelle section à la fin de la page

Quel que soit l'exemple que vous souhaitez recréer, certaines des étapes de base restent les mêmes. La première étape consiste à ajouter une section régulière au bas de la page.

Espacement

Ouvrez les paramètres de la section et supprimez tous les rembourrages haut et bas personnalisés.

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

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et laissez la ligne occuper toute la largeur de l'écran.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• 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

Élément principal

Nous permettons à la ligne entière de coller au bas de notre page en ajoutant deux lignes simples de code CSS à l'élément principal de la ligne.

bottom: 0px;
position: fixed;

Indice Z

Et nous veillerons à ce que la ligne (et le module de texte que nous ajoutons dans les étapes à venir) reste au-dessus de tout le contenu de la page en augmentant l'index Z dans les paramètres de visibilité de la ligne.

• Indice Z : 99

Ajouter un module de code à la colonne

Ajouter du code CSS entre les balises de style

La dernière partie des étapes générales consiste à ajouter un module de code à la nouvelle ligne. Le code CSS que nous ajoutons à l'intérieur de ce module de code nous aidera à obtenir l'effet révélateur du survol. Collez les lignes de code CSS suivantes dans le module :

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

Recréer l'exemple #1

Ajouter un module de texte à la colonne

Ajouter du contenu

Maintenant que nous avons parcouru toutes les étapes, nous pouvons commencer à nous concentrer sur les deux exemples de conception différents, en commençant par le premier ! Ajoutez un module de texte à la colonne de votre ligne. Dans la zone de contenu, nous utilisons le style de paragraphe pour afficher la copie « ≡ Menu ». Nous plaçons alors tous les éléments du menu dans une liste non ordonnée. Nous ajouterons également un lien vers chacun des titres de page individuellement.

Couleur d'arrière-plan par défaut

Passez aux paramètres d'arrière-plan du module et modifiez la couleur d'arrière-plan.

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

Couleur d'arrière-plan du survol

Modifiez cette couleur de fond au survol.

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

Fond dégradé

Et ajoutez également un arrière-plan dégradé par défaut.

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2 : #ffffff
• Position finale : 60 %

Paramètres de texte par défaut

Continuez en allant dans l'onglet conception et en modifiant les paramètres du texte.

• Police du texte : Khand
• Poids de la police de texte : gras
• Couleur du texte : #021827
• Taille du texte : 3vh
• Orientation du texte : Centre

Paramètres de texte de survol

Modifiez certains des paramètres de texte au survol.

• Couleur du texte : rgba(255,255,255,0)
• Taille du texte : 0vh

Paramètres de texte de lien

Ensuite, accédez aux paramètres du texte du lien et modifiez la couleur du texte du lien.

• Couleur du texte du lien : #000000

Paramètres de texte de liste par défaut

Passez aux paramètres de texte de liste par défaut et stylisez-le comme vous le souhaitez. Assurez-vous que vous utilisez « 0px » pour la taille du texte dans son état par défaut.

• Police de la liste non ordonnée : Khand
• Style de police de liste non ordonnée : majuscule
• Alignement du texte de la liste non ordonnée : Centre
• Couleur du texte de la liste non ordonnée : rgba(255,255,255,0)
• Taille du texte de la liste non ordonnée : 0px
• Hauteur de ligne de liste non ordonnée : 0em
• Position de style de liste non ordonnée : à l'intérieur

Paramètres de texte de la liste de survol

Ensuite, modifiez certaines des valeurs au survol pour permettre aux éléments de menu d'apparaître.

• Couleur du texte de la liste non ordonnée : #000000
• Taille du texte de la liste non ordonnée : 2vh
• Hauteur de ligne non ordonnée : 2,1 em

Espacement par défaut

Accédez ensuite aux paramètres d'espacement et donnez une forme au module de texte.

• Marge gauche : 45vw (ordinateur de bureau), 39vw (tablette), 33vw (téléphone)
• Marge droite : 45vw (ordinateur de bureau), 39vw (tablette), 33vw (téléphone)
• Rembourrage supérieur : 2vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)
• Rembourrage inférieur : 2vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)

Espacement de survol

Modifiez ces mêmes valeurs au survol.

• Marge gauche : 14vw
• Marge droite : 14vw
• Rembourrage supérieur : 8vw
• Rembourrage inférieur : 8vw

Bordure par défaut

Passez aux paramètres de bordure et assurez-vous que chacun des coins arrondis a une valeur de « 0px ».

Bordure de survol

Activez les options de survol sur les coins arrondis et modifiez les valeurs en haut à gauche et en haut à droite.

• En haut à gauche : 50vw
• En haut à droite : 50vw

Boîte ombre

Continuez en donnant un peu de profondeur au module à l'aide d'une ombre de boîte. Cela garantira que le menu ne passe pas inaperçu sur la page.

• Force du flou de l'ombre de la boîte : 1000 ms
• Couleur de l'ombre : rgba(0,0,0,0.68)

Classe CSS

Nous ajoutons également une classe CSS au module.

• Classe CSS : dt-menu

Transitions

Enfin, réduisez la durée de transition dans les paramètres de transition.

• Durée de transition : 100 ms

Recréer l'exemple #2

Ajouter un module de texte à la colonne

Ajouter du contenu

Passons au deuxième exemple ! Ici, nous allons à nouveau ajouter « ≡ Menu » en utilisant le style de texte de paragraphe et les éléments de menu en utilisant une liste non ordonnée. Nous ajouterons également un lien vers chacun des éléments de menu individuellement.

Couleur d'arrière-plan par défaut

Passez aux paramètres d'arrière-plan et modifiez la couleur d'arrière-plan.

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

Couleur d'arrière-plan du survol

Modifiez la couleur de fond au survol.

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

Paramètres de texte par défaut

Ensuite, allez dans l'onglet Conception et apportez quelques modifications à l'apparence de la copie de paragraphe.

• Police du texte : Khand
• Couleur du texte : #021827
• Taille du texte : 3vh

Paramètres de texte de survol

Modifiez ces paramètres au survol.

• Couleur du texte : rgba(255,255,255,0)
• Taille du texte : 0vh

Paramètres de texte de lien

Passez aux paramètres de texte et modifiez la couleur du texte du lien.

• Couleur du texte du lien : #ffffff

Paramètres de texte de liste par défaut

Modifiez également les paramètres de conception des éléments de liste non ordonnés.

• Police de la liste non ordonnée : Khand
• Style de police de liste non ordonnée : majuscule
• Alignement du texte de la liste non ordonnée : Centre
• Couleur du texte de la liste non ordonnée : rgba(255,255,255,0)
• Taille du texte de la liste non ordonnée : 0px
• Hauteur de ligne de liste non ordonnée : 0em
• Position de style de liste non ordonnée : à l'intérieur

Paramètres de texte de la liste de survol

Et modifiez certaines de ces valeurs au survol.

• Couleur du texte de la liste non ordonnée : #ffffff
• Taille du texte de la liste non ordonnée : 2vh
• Hauteur de ligne de liste non ordonnée : 2,1 em

Espacement par défaut

Ensuite, allez dans les paramètres d'espacement et donnez un peu d'espace au module.

• Marge droite : 88vw (ordinateur de bureau et tablette), 71vw (téléphone)
• Rembourrage supérieur : 6vw (ordinateur de bureau), 10vw (tablette), 18vw (téléphone)
• Rembourrage inférieur : 4vw (ordinateur de bureau), 10vw (tablette), 12vw (téléphone)
• Rembourrage gauche : 1vw

Espacement de survol

Modifiez les valeurs au survol.

• Marge droite : 59vw
• Rembourrage supérieur : 13vw
• Rembourrage inférieur : 8vw
• Rembourrage gauche : 1vw
• Rembourrage droit : 13vw

Frontière

Et pour créer ce design en quart de cercle, nous allons modifier la bordure en haut à droite dans les paramètres de bordure.

• En haut à droite : 50vw

Boîte ombre

Nous ajouterons également une ombre de boîte pour créer de la profondeur sur la page.

• Force du flou d'ombre de la boîte: 1000px
• Couleur de l'ombre : rgba(0,0,0,0.68)

Classe CSS

Ensuite, nous ajouterons une classe CSS dans l'onglet avancé.

• Classe CSS : dt-menu

Transitions

Et réduisez la durée de transition dans l'onglet avancé pour créer une transition rapide.

• Durée de transition : 100 ms

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.

Exemple 1

Bureau

Mobile

Exemple #2

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer un menu collant extensible à l'aide du Mechanic Layout Pack de Divi. Nous avons traité deux exemples de conception différents que vous pouvez recréer et utiliser sur tout type de site Web que vous créez ! Nous espérons que vous appréciez cette initiative de conception Divi en cours, où nous essayons de mettre quelque chose de plus dans votre boîte à outils de conception chaque semaine. Si vous avez des questions ou des suggestions, assurez-vous de 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.