Section menu

This sample page demonstrates how the section (left) menu is displayed and configured.

Implementation

In order to implement a section menu, there are a few modifications required.

In the top section, you need to set the parameter topSecMenu to true.

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

Add two unclosed <div> after the code above.

• The first <div> must have a class named "container"
• The second <div> must have a class named "row"

You will need to add a <nav> element which should contain your static fallback code.

After that will come the actual section menu, before the opening <main> element. There are a few configuration options.

• "sectionName": This will be used to display the heading(s) of the section menu(s).
• "menuLinks": This will be used for display the links in the menu.

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

• "subLinks": This will be used for display the links in the menu. You can also add "newWindow": true if you want the link to open in a new window.

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

The last change will be to close the two <div> you previously opened, immediately after the closing <main> element. Here is the full snippet of code:

<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-en.html -->
        </nav>
        <!-- Write closure template -->
        <script>
            var secondarymenu = document.getElementById("wb-sec");
            secondarymenu.innerHTML = wet.builder.secmenu({
                "sections": [{
                    "sectionName": "[Topic - Local navigation]",
                    "menuLinks": [{
                        "href": "#",
                        "text": "Link 1",
                        "subLinks": [{
                            "subhref": "#11a",
                            "subtext": "Link 1.1 a)"
                        }, {
                            "subhref": "#11b",
                            "subtext": "Link 1.1 b)"
                        }, {
                            "subhref": "#11c",
                            "subtext": "Opens in a new window",
                            "newWindow": true
                        }, {
                            "subhref": "#11d",
                            "subtext": "Link 1.1 d)"
                        }]
                    }, {
                        "href": "#",
                        "text": "Link 2"
                    }, {
                        "href": "#",
                        "text": "Opens in a new window",
                        "newWindow": true
                    }, {
                        "href": "#",
                        "text": "Link 4"
                    }]
                },{
                    "sectionName": "Opens in a new window",
                    "sectionLink": "#",
                    "newWindow": true,
                    "menuLinks": [{
                        "href": "#",
                        "text": "Link 1"
                    }, {
                        "href": "#",
                        "text": "Link 2"
                    }, {
                        "href": "#",
                        "text": "Link 3"
                    }, {
                        "href": "#",
                        "text": "Link 4"
                    }]
                },{
                    // Rinse and repeat
                    "sectionName": "Section name 3",
                    "menuLinks": [{
                        "href": "#",
                        "text": "Link 1"
                    }, {
                        "href": "#",
                        "text": "Link 2"
                    }, {
                        "href": "#",
                        "text": "Link 3"
                    }, {
                        "href": "#",
                        "text": "Link 4"
                    }]
                },{
                    // Rinse and repeat
                    "sectionName": "Section name ... 27",
                    "menuLinks": [{
                        "href": "#",
                        "text": "Link 1"
                    }, {
                        "href": "#",
                        "text": "Link 2"
                    }, {
                        "href": "#",
                        "text": "Link 3"
                    }, {
                        "href": "#",
                        "text": "Link 4"
                    }]
                }]
            });
        </script>
        <main property="mainContentOfPage" typeof="WebPageElement" class="col-md-9 col-md-push-3">
        ...
        </main>
    </div>
</div>