Tout savoir sur WordPress

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. lien-menu-dynamique 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 ». maj-url-auto

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'
});

.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

Cet article a été mis à jour il y a 1521 jours - Il n'est peut être plus à jour !

Article écrit par Maxime BJ

Développeur, bloggeur et formateur Web spécialisé WordPress. 31 ans. Grenoblois. Co-fondateur de WPChef, l’organisme de formation WordPress.

Organisateur de WPInAlps, le meetup WordPress Grenoblois. Vous pouvez me rencontrer lors d’événements tels que WordCamp Paris et Europe. Traducteur Français de l’extension Advanced Custom Fields. Également développeur d’applications web avec MeteorJs. Je m’occupe un site pour apprendre l’informatique aux débutants gratuitement.

J’aime les jeux vidéo, la rando, la bouffe bien grasse et les voyages.

1 Commentaire

34ed1c1eb811ad59669ccb6c63cdf9f3yyyy