InPageNav.js – Plugin jQuery pour la navigation des Landing Pages

Un plugin issue d’une de mes expérimentations pour faire un menu qui suive automatiquement la navigation de l’utilisateur dans un site One page : surlignagne de la rubrique actuelle, mise à jour dans l’URL grâce au pushstate et scroll animé pour atteindre la section désirée.

Qu’apporte le plugin ?

Ce plugin très léger (2ko) se met en place très facilement vous permet de créer une navigation dynamique dans une landing page, un one page ou dans un contenu chapitré avec les fonctionnalités suivantes :

• Scroll animé et fluide lorsque vous cliquez sur un élément du menu jusqu’à la zone visée
• Lorsque vous scrollez et que vous arrivez à une nouvelle section,  l’élément actif du menu change automatiquement.
• Mise à jour automatique de l’url avec le bon hash (ex : monsite.fr/#contact)

J’ai mis au point ce plugin initialement pour le site www.wordpressinalps.com où vous pouvez le voir en action. La mise à jour de l’URL s’avère très pratique. Elle est rendue possible avec le pushState de HTML5. De cette manière l’internaute peut copier cette URL pour par exemple partager à un ami directement la section “Prochaine rencontre”.

Dans quel cas l’utiliser ?

Dès lors que vous mettez une navigation en place à l’intérieur d’une page  :

• Pour un site One Page
• Pour une landing page relativement longue et séparée en plusieurs sections
• Pour un contenu long avec sommaire

Utilisation

La mise en place est très simple. Chargez jQuery, le plugin InPageNav et appelez ce bout de code :

$('.menu').InPageNav({
    currentClass: 'active'
});

Où .menu est la classe ou l’ID de votre menu. L’option currentClass permet de définir le nom de la classe CSS à appliquer au menu actif. D’autres options sont disponibles comme la vitesse de l’animation, mais aussi un décalage vertical pour prendre en compte un éventuel menu fixé en haut de l’écran. Un fichier d’exemple est fourni avec plus de détails.

Tester et télécharger le plugin

Vous retrouverez mon plugin sur Bitbucket en libre service : https://bitbucket.org/maximebj/jquery-inpagenav Projet initialement forké depuis Davist11