Mise en page et effets
Affinez l’agencement de la barre de navigation, épinglez-la en haut de l’écran au défilement et ajoutez des animations soignées — le tout depuis la section Mise en page de Menu Builder.
Espacement et alignement
Dans la section Mise en page, vous pouvez contrôler l’agencement des éléments de menu :
- Alignement — la position des éléments dans la barre : début, centre, fin, espacement entre les éléments ou espacement uniforme.
- Écart — l’espacement entre les éléments de menu.
- Marges intérieures horizontale / verticale — le rembourrage interne de la barre de navigation.
- Arrondi du conteneur — arrondit les coins de toute la barre.
- Pousser le dernier élément — épingle le dernier élément de menu au bord opposé (pratique pour un appel à l’action « Contact » ou « Connexion »).
Navigation fixe
Activez l’option Barre fixe pour maintenir la barre de navigation en haut de l’écran lorsque le visiteur fait défiler la page.
| Option | Description |
|---|---|
| Réduire au défilement | La barre devient plus compacte une fois la page défilée. |
| Ombre | Ajoute une ombre portée sous la barre lorsqu’elle est épinglée. |
| Disposition en miroir | Utilise un alignement différent à l’état épinglé par rapport à l’état par défaut. |
| Transition | La fluidité de l’animation de la barre entre les états (en secondes). |
| Z-index | Ordre d’empilement, au cas où la barre doive passer au-dessus d’autres éléments fixes. |
Barre de progression du défilement
Une fine barre qui se remplit à mesure que le visiteur fait défiler la page — une touche appréciée sur les longs articles et la documentation.
- Activez la barre de progression du défilement dans la section Mise en page.
- Choisissez sa couleur, sa hauteur (1 à 10 px) et sa position (en haut ou en bas de la barre de navigation).
Animation d’apparition
Animez le menu au premier chargement de la page. Choisissez parmi Fondu, Glissement vers le bas/le haut/la gauche/la droite, Zoom avant ou Retournement X — ou laissez sur Aucune.
Vous pouvez également régler la durée, un délai avant le démarrage et un décalage pour que les éléments apparaissent les uns après les autres.
Animation des liens au survol
Ajoutez une micro-interaction lorsque le visiteur survole un lien de menu. Les options comprennent Soulèvement, Mise à l’échelle, Pulsation, Rebond, Tremblement, Lueur et Soulignement animé.
Indicateur de menu déroulant
Les éléments dotés d’un sous-menu peuvent afficher un petit indicateur. Choisissez sa forme — triangle, chevron, pastille ou aucune — et définissez éventuellement sa couleur, sa taille et s’il pivote à l’ouverture du menu déroulant.
Le panneau du sous-menu déroulant lui-même est entièrement personnalisable dans Style → Sous-menu déroulant : arrondi, marges intérieures horizontale et verticale, taille de police, graisse de police et largeur minimale. La couleur de survol est calculée de manière adaptative à partir de l’arrière-plan du sous-menu, afin de rester visible sur les thèmes clairs comme sombres.
Scroll Spy
Le Scroll Spy met automatiquement en évidence le lien de navigation correspondant à la section actuellement visible dans la fenêtre lorsque le visiteur fait défiler une longue page — un schéma courant sur la documentation, les pages d’atterrissage et les sites en une seule page.
- Activez le Scroll Spy dans Mise en page → Mise en page.
- Définissez un décalage de déclenchement (80 px par défaut) — la hauteur de la barre fixe y est automatiquement ajoutée à l’exécution.
- Activez éventuellement le Défilement fluide avec mise à jour du fragment d’URL via l’History API et annonces dans une région ARIA live pour les lecteurs d’écran.
La dernière section de la page s’active toujours lorsqu’on atteint tout en bas. Les liens de section active partagent le traitement visuel défini dans Couleurs → Lien actif.
Toutes les animations respectent le réglage prefers-reduced-motion du visiteur — voir la page Accessibilité.