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>