Objectifs

L’idée est de créer un sous-menu sur la droite de la page. Il capturera tous les titres <H2> de l’article et créera une copie sous forme de liens.

On utilisera plusieurs plugins jQuery :

  • Magellan : fourni avec le framework Foundation, il permet de voir quelle est la section active de la page.
  • Sticky: fourni avec le framework Foundation, il va fixer notre sous-menu sur la page.

Edit

On ne peut voir le résultat que de manière partielle. Depuis la création de l’article j’utilise le framework materializecss qui propose un sous-menu natif. Par contre j’appelle toujours mes titres de manière dynamique.

Résultat

Le résultat devrait être visible sur toutes les pages d’article. A droite de l’écran.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor diam augue, sit amet venenatis risus fermentum ut. Integer nec iaculis libero. Sed nibh sapien, accumsan porttitor sapien at, lobortis fringilla nisl. Nunc dictum volutpat vulputate. Vestibulum imperdiet eu enim vitae tincidunt. Fusce lacus ligula, tempus nec gravida in, consequat nec tortor. Mauris nisi urna, vulputate sit amet quam in, tincidunt vehicula enim. Nam feugiat posuere aliquet. Nam sodales pharetra vehicula.

Fusce faucibus risus nec tincidunt gravida. Sed in malesuada ipsum, maximus gravida tellus. Nulla dignissim semper molestie. Nulla ornare dui quis lacus vestibulum, vitae consectetur augue mollis. In hac habitasse platea dictumst. Vivamus velit felis, euismod eget sapien id, condimentum aliquet lectus. Vestibulum pellentesque arcu porta arcu elementum pretium. Sed at enim eu odio gravida mollis. Aenean eleifend convallis nunc vel suscipit.

Quisque eu magna vitae neque vulputate vehicula id eget diam. Sed maximus nisi eget porttitor laoreet. Quisque vel massa pulvinar, sagittis quam a, venenatis ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ultrices, nisi eu ornare vulputate, ipsum risus viverra tellus, eu vulputate turpis mauris vel est. In tincidunt magna et lectus vestibulum, nec tempus tortor mollis. Donec mollis ipsum pulvinar mauris scelerisque, id laoreet urna pharetra. Etiam lorem diam, commodo sed augue aliquet, tempus posuere metus. Cras turpis nisi, feugiat ultrices purus vitae, cursus lacinia magna. Donec sed feugiat nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec in lacus enim. Cras purus lorem, iaculis ut justo sit amet, auctor porttitor dolor. Aenean a auctor sapien.

Vestibulum efficitur, erat quis suscipit euismod, enim sem volutpat nunc, id placerat leo justo et mauris. Cras ut finibus augue. Nunc placerat vel turpis nec venenatis. Morbi sed gravida ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus placerat hendrerit arcu, nec viverra odio tincidunt quis. Integer nec sagittis massa.

Sed vestibulum pulvinar eros, eget ullamcorper eros iaculis a. Suspendisse id pharetra nisl. Aliquam tempus sem vitae leo volutpat sodales. Nunc ac mi ipsum. Nullam vitae metus ornare, feugiat metus eu, vestibulum magna. Suspendisse ut bibendum nibh. Vestibulum aliquam, dolor quis lacinia laoreet, augue enim gravida diam, sit amet fermentum lorem risus id lectus. Maecenas pretium justo non felis commodo hendrerit eu aliquet purus.

Explication


jQuery(document).ready(function($) {

    // On appelle la fonction d'initialisation
    initSousMenu();
    // Ainsi que Foundation, sinon les scripts Magellan et sticky ne fonctionneront pas
    $(document).foundation();

    // On initialise le script via la fonction initSousMenu
    function initSousMenu() {

        // On stocke tous les titres <h2> de l'article dans une variable
        var elementst = $(".article-overhaul .contenu h2");

        // Si il y a bien les <H2> qu'on veut dans la page :
        if (elementst.length) {

            // ce compteur servira après, pour le moment il vaut zéro
            var compte = 0;

            // On appelle notre fonction principale
            // On lui passe tous les <H2> et la valeur du compteur
            creationSousMenu(elementst, compte);
        }
    }

    // Cette fonction va créer notre sous menu dans les articles
    function creationSousMenu(elementst, compte) {

        // On cherche la liste <ul> présente dans la sidebar
        var liste = $("#droite").find("ul");

        // On lui ajoute tout un tas d'attributs nécessaires à sticky et magellan
        $(liste).attr('id', 'listeSousMenu')
            .attr('data-magellan', '')
            .addClass('columns')
            // On l'insère dans un élément <nav>
            .wrap('<nav id="navSousMenu" class="row sticky" data-sticky data-anchor="droite" data-margin-top="5"></nav>');

        // On ajoute encore un attribut à la sidebar (plugin sticky)
        $("#droite").attr('data-sticky-container', '');
        // On crée une petite icône de menu dans l'élément <nav>
        $("#navSousMenu").prepend("<span class='small-2 columns align-middle'><i class='fi-list medium '></i></span>");

        // Boucle : Tant que le compteur vaut moins que le nombre de <H2> présents
        while (compte < elementst.length) {

            // On stocke ici le titre de chaque H2
            var contenuH2 = elementst.eq(compte).text();
            // On stocke la future ID qui servira pour l'ID des <H2> et le "href" des liens
            var elementID = 'sousMenu' + (compte + 1);
            // On ajoute l'ID à chaque <H2>
            elementst.eq(compte).attr('id', elementID)
                .attr('data-magellan-target', elementID); // attribut Magellan

            // On crée à chaque fois un lien dans un élément <li>
            $("<a class='sousMenuA' href='#" + elementID + "'>")
                .appendTo("#listeSousMenu")
                .wrap('<li></li>')
                .text(contenuH2);

            // On incrémente notre compteur
            compte++;
        }
    }
});