Le widget Menu de navigation vous permet d’utiliser les menus que vous avez créés dans WordPress et de les concevoir comme vous le souhaitez.
Regardez cette vidéo expliquant les différentes fonctionnalités de ce widget.

Contenu

Disposition

  1. Menu : sélectionnez un menu que vous avez précédemment configuré via Apparence > Menus
  2. Disposition : choisissez une disposition horizontale, verticale ou déroulante
  3. Aligner : définissez l’alignement des éléments de menu, à gauche, au centre, à droite ou justifié
  4. Pointeur : 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 In, Drop Out 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

Liste déroulante mobile

  1. Point d’ arrêt : sélectionnez à quel moment le menu déroulant mobile entre en action, sur mobile, tablette ou aucun.
  2. Pleine largeur : sélectionnez si la liste déroulante mobile s’étend sur toute la largeur de l’appareil, soit Oui ou Non
  3. Aligner : choisissez si les éléments du menu mobile sont affichés à gauche ou au centre en sélectionnant à côté ou au centre
  4. Bouton bascule : affichez l’icône Hamburger comme bouton bascule ou non
  5. Toggle Align : affiche le bouton bascule à gauche, au centre ou à droite de l’écran

Style

Menu principal

Typographie : définissez les options de typographie pour le texte de l’élément de menu.

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

Notez que si une couleur de survol est définie mais qu’aucune couleur active n’est définie, la couleur active utilisera la couleur de survol 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 du survol ou des états actifs du pointeur. L’état normal utilise le jeu de couleurs comme couleur d’accentuation dans les paramètres de couleurs par défaut .
  3. Largeur du pointeur : définissez la largeur du pointeur
  4. Remplissage horizontal : définissez le remplissage horizontal autour du texte des éléments de menu
  5. Remplissage vertical : définissez le remplissage vertical autour du texte des éléments de menu
  6. Espace entre : définir 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 définis 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 d’arrière-plan : choisissez la couleur d’arrière-plan des éléments de menu
  3. Typographie : définissez les options de typographie 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éfinir la largeur de la bordure
  6. Couleur : choisissez la couleur de la bordure
  7. Rayon de la bordure : définissez le rayon de la bordure pour contrôler l’arrondi des coins
  8. Ombre de boîte : créez une ombre de boîte autour du menu déroulant
  9. Remplissage horizontal : définissez le remplissage horizontal autour du texte des éléments de menu
  10. Remplissage vertical : définissez le remplissage vertical autour du texte des éléments de menu

Diviseur

  1. Type de bordure : sélectionnez un type de bordure pour le séparateur, en choisissant Aucun, Solide, Double, Pointillé, Pointillé ou Rainure
  2. Couleur : si la bordure de séparation est choisie, choisissez la couleur de la bordure de séparation
  3. Largeur de la bordure : si la bordure de séparation est choisie, définissez la largeur de la bordure de séparation
  4. Distance : définissez la quantité d’espace entre la bascule et le menu déroulant

Astuce: Allez dans Elementor> Paramètres> Avancé et assurez-vous que Load Font Awesome 4 Support est réglé sur Oui afin que les indicateurs de votre sous-menu s’affichent correctement.

Bouton à bascule

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

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

Remarque : le bouton bascule fait référence à l’icône du menu hamburger.

Attributs d’accessibilité

Le widget du menu de navigation possède les attributs d’accessibilité suivants:

  • tabindex
  •  aria élargi
  •  aria caché
  •  role = « navigation »

Avancée

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

Source : https://docs.elementor.com/article/244-nav-menu