Menu de section

Cet exemple de page montre comment le menu de la section (à gauche) est affiché et configuré.

Mise en oeuvre

Afin d'implémenter un menu de section, quelques modifications sont nécessaires.

Dans la section top, vous devez définir le paramètre topSecMenu: true.

defTop.outerHTML = wet.builder.top({
...
    "topSecMenu": true
...
});
                    

Ajoutez deux <div> non fermés après le code ci-dessus.

• Le premier <div> doit avoir une classe nommée container
• La deuxième <div> doit avoir une classe nommée row

Vous devrez ajouter un élément <nav> qui devrait contenir votre code de secours statique.

Après cela viendra le menu de la section réelle, juste avant l'élément d'ouverture <main>. Il existe quelques options de configuration.

• sectionName: Ceci sera utilisé pour afficher le (s) titre (s) du (des) menu (s) de section.

"sectionName": "[Sujet - Navigation locale]"
                        

• menuLinks: Ceci sera utilisé pour afficher les liens dans le menu.

"menuLinks": [{
    "href": "#",
    "text": "Lien 1"
}
                        

• subLinks: Ceci sera utilisé pour afficher les liens dans le menu. Vous pouvez également ajouter "newWindow": true si vous souhaitez que le lien s'ouvre dans une nouvelle fenêtre.

"subLinks": [{
    "subhref": "#",
    "subtext": "Lien 1",
    "newWindow": true
}]
                        

Le dernier changement sera de fermer les deux <div> vous avez précédemment ouvert, après avoir fermé l'élément <main>. Voici l'extrait de code complet:

<script>
    var defTop = document.getElementById("def-top");
    defTop.outerHTML = wet.builder.top({
        ...
        "topSecMenu": true
        ...
    });
</script>
<div class="container">
    <div class="row">
        <nav class="wb-sec col-md-3 col-md-pull-9" typeof="SiteNavigationElement" id="wb-sec">
            <!-- Write closure fall-back static file -->
            <!-- secMenu-fr.html -->
        </nav>
        <!-- Write closure template -->
        <script>
            var secondarymenu = document.getElementById("wb-sec");
            secondarymenu.innerHTML = wet.builder.secmenu({
                "sections": [{
                    "sectionName": "[Sujet - Navigation locale]",
                    "menuLinks": [{
                        "href": "#",
                        "text": "Lien 1",
                        "subLinks": [{
                            "subhref": "#11a",
                            "subtext": "Lien 1.1 a)"
                        }, {
                            "subhref": "#11b",
                            "subtext": "Lien 1.1 b)"
                        }, {
                            "subhref": "#11c",
                            "subtext": "Ouvre dans une nouvelle fenêtre",
                            "newWindow": true
                        }, {
                            "subhref": "#11d",
                            "subtext": "Lien 1.1 d)"
                        }]
                    }, {
                        "href": "#",
                        "text": "Lien 2"
                    }, {
                        "href": "#",
                        "text": "Ouvre dans une nouvelle fenêtre",
                        "newWindow": true
                    }, {
                        "href": "#",
                        "text": "Lien 4"
                    }]
                },{
                    "sectionName": "Ouvre dans une nouvelle fenêtre",
                    "sectionLink": "#",
                    "newWindow": true,
                    "menuLinks": [{
                        "href": "#",
                        "text": "Lien 1"
                    }, {
                        "href": "#",
                        "text": "Lien 2"
                    }, {
                        "href": "#",
                        "text": "Lien 3"
                    }, {
                        "href": "#",
                        "text": "Lien 4"
                    }]
                },{
                    // Rinse and repeat
                    "sectionName": "Nom de la section 3",
                    "menuLinks": [{
                        "href": "#",
                        "text": "Lien 1"
                    }, {
                        "href": "#",
                        "text": "Lien 2"
                    }, {
                        "href": "#",
                        "text": "Lien 3"
                    }, {
                        "href": "#",
                        "text": "Lien 4"
                    }]
                },{
                    // Rinse and repeat
                    "sectionName": "Nom de la section ... 27",
                    "menuLinks": [{
                        "href": "#",
                        "text": "Lien 1"
                    }, {
                        "href": "#",
                        "text": "Lien 2"
                    }, {
                        "href": "#",
                        "text": "Lien 3"
                    }, {
                        "href": "#",
                        "text": "Lien 4"
                    }]
                }]
            });
        </script>
        <main property="mainContentOfPage" typeof="WebPageElement" class="col-md-9 col-md-push-3">
        ...
        </main>
    </div>
</div>