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 » sur true.

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

Ajoutez deux <div> non fermés après le code ci-dessus et juste avant l'élément d'ouverture <main>.

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

Après avoir fermé l'élément <main> 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. 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. 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">
        <main property="mainContentOfPage" typeof="WebPageElement" class="col-md-9 col-md-push-3">
        ...
        </main>
        <nav class="wb-sec col-md-3 col-md-pull-9" typeof="SiteNavigationElement" id="wb-sec">
            <!-- Write closure fall-back static file -->
            <!-- secMenu-en.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>
    </div>
</div>