Pour créer un menu déroulant dans Divi

Les gros titres avec de nombreux liens de navigation peuvent prendre beaucoup d’espace précieux sur le site (en particulier au – dessus du pli). C’est pourquoi les menus contextuels et les menus déroulants deviennent de plus en plus populaires. Dans la plupart des cas, le menu affiché par défilement reste au – dessus du contenu de la page, cachant certains éléments. Cependant, les menus coulissants fonctionnent légèrement différemment. L’effet slide Push est unique en ce sens que le menu glisse du Haut de la page tout en poussant le contenu de la page vers le bas afin que rien ne soit caché.
Dans ce tutoriel, nous vous montrerons comment créer des menus coulissants à partir de zéro en utilisant Divi Theme Builder. Une fois le menu créé, il devient un outil universel pour les différentes applications, car vous pouvez remplir cette section avec tout ce que vous voulez en utilisant Divi Builder. Allons – y! Voici une vue rapide des menus coulissants que nous allons créer dans ce tutoriel. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. T
R la hauteur totale de la fenêtre sur l’appareil mobile lorsque l’utilisateur active ou désactive le menu. Ajoutez les CSS personnalisés suivants à l’élément principal seulement sur la tablette:
Hauteur: calcul (100vh – 70px);
Débordement: Roulez! Important
Comportement de dépassement: inclure; Après avoir ajouté la ligne 1 pour compléter la configuration de la section, créez une ligne dans les colonnes de la section. Paramètres de ligne 1 puis mettre à jour les paramètres de ligne comme suit: largeur de la gouttière de conception: 1 largeur: 100% largeur maximale: 1280 Px remplissage: 3vh au – dessus du bord inférieur, 3vh au – dessous du bord inférieur: 1px couleur du bord inférieur: rgba (255255255,0.2) Personnaliser CSS sur l’onglet avancé, ajoutez les CSS personnalisés suivants à l’élément principal: sous le Bureau…
Affichage: Flex;
Aligner le contenu: centré;
Aligner les éléments: Centre; Sous la table… Affichage: Flex;
Direction de flexion: colonne;
Aligner les éléments: Centre; Définir les colonnes à la fin des paramètres de ligne, ouvrir les paramètres de colonne et ajouter un clip CSS personnalisé: display: Flex à l’élément principal;
Aligner les éléments: Centre;
Aligner le contenu: centré; Cela centrera le contenu de la colonne verticalement et horizontalement. Ajout de boutons maintenant, nous sommes prêts à commencer à ajouter des éléments de menu en utilisant le module boutons. Tout d’abord, ajoutez un nouveau bouton à la colonne. Paramètres du bouton puis mise à jour des paramètres du bouton comme suit: contenu du texte du bouton: conception de l’URL du lien du bouton: # (remplacer par une URL personnalisée plus tard) Design button text color: # FFFFFF button Border width: 0px button Character: Montserrat button font Weight: Heavy button icon: [according to your choice] BUTTON icon Location: left Maintenant, pour créer des boutons supplémentaires pour le menu, nous pouvons copier les colonnes. Pour cet article, nous copions la colonne 4
Excellente transition. Pour créer une icône de menu, nous utiliserons un module texte avec un HTML personnalisé qui aura un style avec un CSS externe. Continuez en ajoutant un formulaire texte à la colonne 3. Ajoutez un formulaire texte HTML, puis ajoutez le code HTML suivant au contenu du formulaire texte: L’arrière – plan assigne une couleur d’arrière – plan au formulaire de texte: couleur d’arrière – plan: # 1a1e36 La conception du texte met ensuite à jour les paramètres de conception comme suit: largeur: 70px alignement du module: hauteur droite: 70px remplissage: 20px haut, 20px bas, 16px gauche, 16px droite Classes CSS dans l’onglet avancé, ajoutez les classes CSS suivantes: classes CSS: et pousser le menu basculer Afin d’implémenter les fonctionnalités nécessaires pour faire fonctionner ce menu coulissant Push, nous ajouterons des CSS personnalisés et jquery au module de code. Continuez en ajoutant un formulaire de code dans la colonne 3 sous le formulaire texte. Ensuite, collez le code suivant (important: Enveloppez ce code dans l’étiquette de style pour qu’il fonctionne correctement):. Ligne de production
Affichage: blocs;
Position: absolue;
Hauteur: 2px;
Largeur: 100%;
Contexte: # FFFFFF;
Opacité: 1;
Conversion Webkit:. 1S entrée \/ sortie facile;
Conversion MOZ:. 1S entrée \/ sortie facile;
– O – transition:. 1S entrée \/ sortie facile;
Conversion:. 1S entrée \/ sortie facile;
}
– Oui. Ligne 2 {
En haut: 10px;
}
– Oui. Ligne 3 {
En haut: 20px;
}
– Oui. Basculer le menu du bouton et. Ouvre. Ligne 1 {
En haut: 10px;
– transformation webkit: rotation (135 degrés);
– transformation de MOZ: rotation (135 degrés);
O transformation: rotation (135 degrés);
Transformation: rotation (135 degrés);
}
– Oui. Basculer le menu du bouton et. Ouvre. Ligne 2 {
Affichage: aucun;
}
– Oui. Basculer le menu du bouton et. Ouvre. Ligne 3 {
En haut: 10px;
– transformation webkit: rotation (- 135 degrés);
– transformation de MOZ: rotation (- 135 degrés);
O transformation: rotation (- 135 degrés);
Transformation: rotation (- 135 degrés);
}
– Oui. Et push