Custom Menu

This sample page demonstrates how a custom menu can be displayed on your page.

Implementation

There are two methods by which a custom menu can be displayed.

First method

• Create a custom menu in a separate html file and the provide URL through the menuPath parameter in the appTop section of your page.
• The equivalent html of the menu on this page can be found here.

defTop.outerHTML = wet.builder.appTop({
...
    "menuPath": "../ajax/appmenu-en.html"
...
});
                

Second method

The second method is creating the menu in the appTop section of your page. There are a few configuration options:

• "menuLinks": used to create a top navigation. You can provide the title and URL through the text and href parameters respectively. You can specify the description for an abbreviation through the acronym parameter.

defTop.outerHTML = wet.builder.appTop({
...
    "menuLinks": [{
        "text": "First Section",
        "href": "#",
        "acronym": "Description of abbreviation"
    }]
...
});
                

• "subLinks": used to create the sub-menu items. These are displayed when the user hovers over the top navigation. You can provide the title and URL through the subtext and subhref parameters respectively. You can specify the description for an abbreviation through the acronym parameter.

"subLinks": [{
    "subtext": "Subsection 1",
    "subhref": "#",
    "acronym": "Description of abbreviation"
}]
                

Note: Menu items with sub links do not have a link so that consistent behaviour is found when accessing a site through mobile or navigating a site using a keyboard. For example, on a touch screen, tapping a menu item should open the panel with the sub-links and not navigate elsewhere.

defTop.outerHTML = wet.builder.appTop({
...
    "menuLinks":[
        {
            "text":"Overview"
        },
        {
            "text":"First Section"
        },
        {
            "href": "#",
            "text":"Second Section",
            "subLinks": [{
                "subhref": "#",
                "subtext": "Subsection 1"
            },
            {
                "subhref": "#",
                "subtext": "Subsection 2"
            },
            {
                "subhref": "#",
                "subtext": "Subsection 3"
            },
            {
                "subhref": "#",
                "subtext": "Subsection 4"
            },
            {
                "subhref": "#",
                "subtext": "Second section - More",
                "acronym": "Description of abbreviation"
            }],
        }]
...
});