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).

"sectionName": "[Topic - Local navigation]"
                        

• "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:

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"
        }]
    }]
});