On en voit beaucoup des sticky menu sur les sites web, mais comment cela fonctionne-t-il ? Et pourquoi les utiliser ? Voilà un petit article en cette fin d’année bien chargée qui vous montre comment coder rapidement un menu rétractable.
Un sticky menu, c’est quoi ?
Vous en avez dû sûrement en rencontrer en parcourant la toile. Il s’agit de ces menus qui se rétractent lors du scroll de la page, et qui peut donc ensuite se fixer pour continuer de naviguer à travers le site que vous visitez. Si l’habitude a été prise de scroller vers le bas avec la place que prennent aujourd’hui le téléphone, il n’empeche qu’un contenu trop long peut perdre le visiteur fatigué alors de remonter toute la page au préalable scrollée pour retrouver le menu de navigation. Le sticky menu est alors tout indiqué.
Remarque : un footer qui reprend une sitemap de votre site peut elle aussi aider le visiteur à continuer son surf, une fois le premier contenu parcouru.
Le code
Passons aux choses sérieuses. Pour réaliser un sticky menu, vous devrez passer par le Javascript. En effet, ce langage est tout indiqué pour écouter les actions de votre utilisateur. Avec Javascript, vous pouvez calculer le scroll de la page et effectuer ensuite une action si ce dernier atteint une certaine valeur.
Ensuite, et je pense que c’est le mieux, vous pouvez ajouter une classe à votre menu rétractable.
C’est effectivement dans vos feuilles de styles (CSS) que vous allez ensuite personnaliser ce nouveau menu. Dans mon petit exemple, le menu est moins haut et les liens sont moins écartés les uns des autres.
Voilà :
