Un menu de navigation toujours visible

Depuis quelques jours, le menu de navigation principal de Gastero Prod reste visible en permanence[1] même si vous descendez dans la page. Cela peut vous sembler un caprice de g33k qui tente des trucs un peu sexy, mais à l'usage, je suis extrêmement content de ce rapide ajout ergonomique !

Un menu de navigation toujours visible, même en défilant sur plusieurs hauteurs d'écran, cela signifie que l'on a moins besoin des liens de type « retour en haut de page » que je ne sais jamais où placer, et que certains du coup se mettent à placer presque à chaque paragraphe pour être sûr[2]. Cela signifie aussi que l'internaute pourra accéder plus vite à d'autres rubriques du site, en un seul clic.

J'ai vu ce type de fonctionnement pour la première sur le panier dans l'Apple Store :

Résumé de la commande en haut sur l'Apple Store. Le résumé de la commande s'affiche normalement, aligné sur le haut du contenu.

Résumé de la commande toujours visible sur l'Apple Store. Quand on descend dans la page, le résumé de la commande suit le mouvement pour rester toujours visible.

Sur l'Apple Store, c'est d'ailleurs encore plus subtil, le bloc présentant les spécifications du produit commandé se réduit automatiquement si la place disponible en hauteur n'est pas assez grande, beau soucis du détail !

Spécifications réduites sur l'Apple Store. Les spécifications du matériel commandé sont réduites en hauteur si on n'a pas assez de place.

Je l'ai vu plus récemment sur le bloc « View options » à droite des résultats de recherche sur MyFonts :

Haut de la page de recherche de MyFonts. Le bloc de paramétrage de la recherche est à droite, sous celui présentant les tags. Dommage qu'il ne soit pas tout de suite visible.

Plus bas dans la page de recherche de MyFonts. Le bloc « View options » s'ancre en haut de la fenêtre si on descend dans la page.

Je n'avais pas encore pensé à appliquer ce principe bien sympathique à mon site, mais l'article Fixed Floating Elements de jQuery for Designers présentant l'approche technique m'a mis le pied à l'étrier, je n'ai pas su résister !

  1. Sur les navigateurs graphiques où les CSS et le JavaScript sont activés… ↩︎

  2. J'exagère à peine ↩︎

  4. Note from 31 May 2024

    Please, please, please… check on the sites you build that using Command #fn1" id="fnref1">[1] + click #fn2" id="fnref2">[2] always opens links in a new tab, even if you used some JavaScript to build a dumb Web link!

    I see too many sites where Cmd + click opens the link in the current tab, so when browsing a list of links, if I want to open them in new tabs (for example to compare products), I need to use right click and then select the "open link in a new tab" option, for each link.

    Really cumbersome! 😡

    1. Command on a Mac, but I guess Control on Windows and Linux? #fnref1" class="footnote-backref">↩︎

    2. Check the click both with mouses and trackpads! #fnref2" class="footnote-backref">↩︎