2.5Navigation : ancres, menus & défilement
L'essentiel en 30 secondes
- Menus = la navigation principale (en-tête) ; ancres = des liens vers une section précise de la même page.
- Le défilement fluide (smooth scroll) anime doucement l'arrivée sur une ancre.
- Sur mobile, le menu s'adapte (souvent un menu « hamburger ») — à tester.
Mini-cas filé — Nadia relie l'accueil
La page d'accueil du menuisier est longue : présentation, réalisations, contact. Nadia ajoute un menu d'ancres en haut (« Réalisations », « Contact ») : un clic fait défiler en douceur jusqu'à la bonne section. Sur mobile, elle vérifie que le menu hamburger s'ouvre bien et que les ancres fonctionnent au doigt.
Dernière étape du niveau 2 — rendre la page longue navigable.
1. Menus, ancres, défilement
Le menu principal (dans l'en-tête) structure la navigation entre pages. Les ancres (liens d'ancrage) mènent à une section précise de la même page : on pose une « ancre de menu » sur une section, puis un lien vers elle (ex. #realisations). Le défilement fluide (smooth scroll) rend l'arrivée douce plutôt qu'un saut brusque.
Nadia pose des ancres sur « Réalisations » et « Contact », puis crée des liens vers elles dans un petit menu d'accueil. Les liens en général (boutons, widgets) peuvent pointer vers des pages, des ancres, un e-mail ou un téléphone.
2. Navigation mobile
Sur mobile, la navigation se replie souvent en menu « hamburger » (icône à trois traits). Il faut tester : le menu s'ouvre-t-il ? les ancres amènent-elles au bon endroit ? les cibles sont-elles assez grandes pour le doigt ?
Une bonne navigation guide le visiteur sans le perdre : peu d'entrées, des libellés clairs, et un comportement identique sur ordinateur et mobile.
🔎 Exemple concret — Menu d'ancres pour page longue (cas Nadia)
Sections : #presentation, #realisations, #contact
Menu d'accueil : « Réalisations » → #realisations, « Contact » → #contact
Défilement fluide activé.
Mobile : menu hamburger testé, ancres OK au doigt.
Bouton « Appeler » → tel:+213...Résultat : une page longue facile à parcourir.
Leçon : ancres + défilement fluide + test mobile.
Vocabulaire de la section
- Menus
- La navigation principale du site (en-tête), entre les pages.
Exemple simple : Accueil · Réalisations · Contact dans l'en-tête.
Ce que ce n'est pas : confondre menu de pages et ancres internes.
Réflexe : menu = pages du site.
- Ancres (liens d'ancrage)
- Des liens qui mènent à une section précise de la même page.
Exemple simple : « Réalisations » → #realisations sur l'accueil.
Ce que ce n'est pas : utiliser une ancre pour aller vers une autre page.
Réflexe : ancre = même page ; #section.
- Défilement fluide (smooth scroll)
- Le défilement animé et doux vers une ancre.
Exemple simple : clic « Contact » → glissement doux jusqu'au bas.
Ce que ce n'est pas : un saut brusque désagréable.
Réflexe : activer le défilement fluide sur les ancres.
- Liens
- Boutons et widgets peuvent pointer vers page, ancre, e-mail ou téléphone.
Exemple simple : bouton « Appeler » → tel:+213…
Ce que ce n'est pas : un lien vide ou cassé.
Réflexe : choisir la cible selon l'intention (page/ancre/tel/mail).
- Navigation mobile (hamburger)
- Le menu replié en icône sur mobile, à tester au doigt.
Exemple simple : menu hamburger qui s'ouvre et dont les ancres marchent.
Ce que ce n'est pas : un menu mobile qui ne s'ouvre pas ou aux cibles trop petites.
Réflexe : tester le menu mobile en vrai.
En pratique — Rendre une page longue navigable
- Posez des ancres de menu sur vos sections (ex. #realisations, #contact).
- Créez des liens (menu ou boutons) vers ces ancres.
- Activez le défilement fluide.
- Testez sur mobile : menu hamburger, ancres au doigt, cibles assez grandes.
Script prêt à dire — présenter la navigation au client (20 s)
« Votre page d'accueil est un peu longue, j'y ai donc ajouté un petit menu : un clic sur « Réalisations » ou « Contact » fait défiler en douceur jusqu'à la bonne section. Sur mobile, ce menu se replie proprement et j'ai vérifié qu'il fonctionne bien au doigt. »
Montrer que la navigation guide le visiteur, surtout sur mobile.
Modèle copier-coller — plan de navigation
MENU PRINCIPAL (pages) : _______________
ANCRES (même page) : #________ #________ #________
LIENS VERS ANCRES (menu/boutons) : _______________
DÉFILEMENT FLUIDE : activé / désactivé
BOUTON TÉL (tel:) / E-MAIL (mailto:) : _______________
TEST MOBILE (hamburger + ancres au doigt) : fait / à fairePage longue (one-page)
Menu d'ancres indispensable pour naviguer entre sections.
Site multi-pages
Menu de pages dans l'en-tête ; ancres en complément sur les longues pages.
Contact direct
Boutons tel:/mailto: pour joindre l'artisan en un clic, surtout mobile.
Mobile
Menu hamburger clair, peu d'entrées, cibles larges pour le doigt.
✓ Bonnes pratiques
- Utiliser des ancres pour les pages longues.
- Activer le défilement fluide.
- Tester le menu et les ancres sur mobile.
✗ Pièges fréquents
- Confondre ancre (même page) et lien de page.
- Oublier de tester le menu mobile.
- Des libellés de menu vagues ou trop nombreux.
Points clés à retenir
- Menus = pages ; ancres = sections de la même page.
- Défilement fluide pour une arrivée douce.
- Liens vers page, ancre, tél, e-mail.
- Tester la navigation mobile (hamburger).
Défi 48h — appliquez demain
Sur une page longue, posez 2 ancres, créez des liens vers elles, activez le défilement fluide, puis testez le menu hamburger et les ancres sur un vrai téléphone. 20 minutes.
- Je crée des ancres et des liens internes.
- J'active le défilement fluide.
- Je teste la navigation sur mobile.
Questions fréquentes
Quelle différence entre une ancre et un lien de page ?
Une ancre mène à une section de la même page (#section) ; un lien de page mène à une autre page du site. Les confondre casse la navigation.
Comment créer un menu qui fait défiler jusqu'à une section ?
On pose une « ancre de menu » sur la section, puis on crée un lien vers son identifiant (#ancre). En activant le défilement fluide, l'arrivée est douce.
Dois-je tester le menu sur mobile ?
Oui : sur mobile, le menu se replie souvent en hamburger. Vérifiez qu'il s'ouvre, que les ancres fonctionnent et que les cibles sont assez grandes pour le doigt.
Nadia veut qu'un clic sur « Réalisations » amène à la section réalisations de la même page, en douceur. Que met-elle en place ?