Comment créer un sommaire original ?

Lorsque l’on possède un site, et en particulier un blog, on effectue souvent un travail de rédacteur afin d’ajouter du contenu frais. Le but est de créer un véritable intérêt sur le site et de fidéliser les internautes. Si votre contenu plait, les internautes reviennent. C’est une loi basique sur le web.

En plus d’un contenu d’intérêt, le design et la facilité de navigation sont également des aspects importants pour votre site. Elaborer un design de qualité relève en grande partie de l’art du graphisme, mais pas que. Le parcours de votre site par les internautes est un travail d’ergonomie qu’il est nécessaire de bien concevoir. En outre, il existe des tas d’astuces pour rendre un site accueillant, clair et agréable à la navigation. Parmi ces diverses astuces, on peut citer l’ajout d’un sommaire pour les contenus longs et structurés. C’est bien souvent le cas des articles sur les blogs.

Aujourd’hui, je vais vous expliquer rapidement comment créer un sommaire original.

Le sommaire progressif

Qu’est-ce que c’est ?

Un sommaire dit progressif est un sommaire qui observe le suivi de lecture de l’internaute. Cela signifie simplement qu’en regardant le sommaire, on peut savoir où en est notre lecture de l’article.

La technologie utilisée

L’objectif de cet article n’est pas d’expliquer comment créer un sommaire avec PHP, mais plutôt comment customiser son sommaire avec du JavaScript et notamment du jQuery.

Le principe

Le principe est simple. Il suffit de créer un sélecteur jQuery qui récupère tous les titres de votre contenu, calcule leur position et met par exemple leur background en surbrillance lorsque leur position est comprise entre la valeur du scroll de la fenêtre et la taille de la fenêtre.

C’est assez technique comme principe, je vous incite donc à suivre le tutoriel de l’équipe de Netmacom, qui a elle-même mis ce système en place sur le blog de son agence web.