Widget de menu de navigation (Pro)

Les Le menu de navigation widget vous permet d'utiliser menus que vous avez créés dans WordPress et concevez-les comme vous le souhaitez.
Regardez cette vidéo qui explique les différentes fonctionnalités de ce widget.

Le contenu

La conception

1. Menu: Sélectionnez un menu que vous avez précédemment configuré à l'aide de Apparence > Les menus
2. La conception: Choisissez une disposition horizontale, verticale ou déroulante
3. Pour s'aligner: Définit l'alignement de l'élément de menu, à gauche, au centre, à droite ou justifié
4. Aiguille: Sélectionnez un pointeur, Aucun, Souligné, Double ligne, Encadré, Arrière-plan ou Texte
5. Animation: Choisissez l'animation du pointeur, soit Fade, Slide, Grow, Drop, Drop ou None
6. Indicateur de sous-menu: Choisissez l'icône qui indique qu'un élément a des éléments de sous-menu, soit Aucun, Classique, Chevron, Angle ou Plus

Menu déroulant mobile

1. Point d'arrêt: Sélectionnez à quel moment le menu déroulant mobile est activé, qu'il s'agisse de Mobile, Tablette ou Aucun.
2. Pleine largeur: Sélectionnez si le menu déroulant mobile couvre toute la largeur de l'appareil, oui ou non
3. Pour s'aligner: Choisissez si les éléments du menu mobile sont affichés à gauche ou au centre, en sélectionnant Apart ou Centre
4. Bouton d'activation: Afficher l'icône de hamburger comme bouton bascule ou non
5. Basculer l'alignement: Affiche le bouton bascule à gauche, au centre ou à droite de l'écran

Style

Menu principal

Typographie: Définit les options de typographie pour le texte de l'élément de menu.

Les éléments suivants peuvent être configurés indépendamment pour les trois états: Normal, Survol et Actif.

Notez que si une couleur de décalage est définie mais qu'aucune couleur active n'est définie, la couleur active utilisera la couleur de décalage par défaut.

1. Couleur du texte: Choisissez la couleur du texte de l'élément de menu
2. Couleur du pointeur: Choisissez la couleur des états actifs ou mobiles du pointeur. L'état normal utilise le jeu de couleurs comme couleur d'accentuation dans le paramètre Couleurs par défaut.
3. Largeur du pointeur: Définit la largeur du pointeur
4. Rembourrage horizontal: Définit le remplissage horizontal autour du texte des éléments de menu
5. Rembourrage vertical: Définit le remplissage vertical autour du texte des éléments de menu
6. L'espace entre: Définit l'espace entre chaque élément de menu

Menu déroulant

Sur le bureau, cela affectera le sous-menu. Sur mobile, cela affectera l'ensemble du menu.

Les éléments suivants peuvent être configurés indépendamment pour les trois états: Normal, Survol et Actif.

1. Couleur du texte: Choisissez la couleur du texte de l'élément de menu
2. Couleur de l'arrière plan: Choisissez la couleur d'arrière-plan des éléments de menu
3. Typographie: Définit les options de police pour les éléments de menu
4. Type de bordure: Sélectionnez un type de bordure dans le menu déroulant, en choisissant Aucun, Solide, Double, Pointillé, Pointillé ou Rainure
5. Largeur: Définit la largeur de la bordure
6. Couleur: Choisissez la couleur de la bordure
7. Rayon du bord: Définit le rayon de la bordure pour contrôler l'arrondi des coins
8. Ombre de la boîte: Crée une ombre de boîte autour du menu déroulant
9. Rembourrage horizontal: Définit le remplissage horizontal autour du texte des éléments de menu
10. Rembourrage vertical: Définit le remplissage vertical autour du texte des éléments de menu

Diviseur

1. Type de bordure: Sélectionnez un type d'arête pour le séparateur, en choisissant Aucun, Solide, Double, Pointillé, Pointillé ou Rainure
2. Couleur: Si la bordure de division est choisie, choisissez la couleur de la bordure de division
3. Largeur de la bordure: Si la bordure de division est choisie, définissez la largeur de la bordure de division
4. Distance: Définit la quantité d'espace entre le levier et le menu déroulant

Astuce: allez à Elementor> Paramètres> Avancé et assurez-vous Charger le support de Font Awesome 4 est établi en Oui afin que les indicateurs de sous-menu s'affichent correctement.

Bouton d'activation

Les éléments suivants peuvent être définis indépendamment pour les états normal et flottant.

1. Couleur: Choisissez la couleur de l'icône du bouton bascule
2. Couleur de l'arrière plan: Choisissez la couleur d'arrière-plan du bouton bascule
3. Taille: Définit la taille du bouton bascule
4. Largeur de la bordure: Définit la largeur de la bordure autour du bouton bascule
5. Rayon du bord: Définit le rayon de la bordure du bouton bascule

Noter: Le bouton bascule fait référence à l'icône du menu hamburger.

Attributs d'accessibilité

Les Widget du menu de navigation a les attributs d'accessibilité suivants:

• tabindex
• aria élargi
• air caché
• role = "navigation"

Avancée

Définissez les options avancées applicables à ce widget

• Lire l'article complet sur le widget de menu
• Découvrez comment créer et concevoir un menu de navigation personnalisé