Menu personnalisé

Cet exemple de page montre comment un menu personnalisé peut être affiché sur votre page.

Mise en œuvre

Il existe deux méthodes par lesquelles un menu personnalisé peut être affiché.

Première méthode

• Créez un menu personnalisé dans un fichier html séparé et l'URL de fourniture via le paramètre menuPath dans la section appTop de votre page.
• Le code HTML équivalent du menu de cette page peut être trouvé ici.

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

Deuxième méthode

La deuxième méthode consiste à créer le menu dans la section appTop de votre page. Il existe quelques options de configuration:

• menuLinks: utilisé pour créer une navigation supérieure. Vous pouvez fournir le titre et l'URL via les paramètres text et href respectivement. Vous pouvez spécifier la description d'une abréviation via le paramètre acronym.

defTop.outerHTML = wet.builder.appTop({
...
    "menuLinks": [{
        "text": "Première section",
        "href": "#",
        "acronym": "Description de l'abréviation"
    }]
...
});
                

• subLinks: utilisé pour créer les éléments de sous-menu. Ceux-ci sont affichés lorsque l'utilisateur survole la navigation supérieure. Vous pouvez fournir le titre et l'URL via les paramètres subtext et subhref respectivement. Vous pouvez spécifier la description d'une abréviation via le paramètre acronym.

"subLinks": [{
    "subtext": "Sous-section 1",
    "subhref": "#",
    "acronym": "Description de l'abréviation"
}]
                

Noter: Les éléments de menu avec des sous-liens n'ont pas de lien, ce qui permet de trouver un comportement cohérent lors de l'accès à un site via un mobile ou de la navigation sur un site à l'aide d'un clavier. Par exemple, sur un écran tactile, appuyer sur un élément de menu devrait ouvrir le panneau avec les sous-liens et ne pas naviguer ailleurs.

defTop.outerHTML = wet.builder.appTop({
...
    "menuLinks":[
        {
            "text":"Aperçu"
        },
        {
            "text":"Première section"
        },
        {
            "href": "#",
            "text":"Deuxième section",
            "subLinks": [{
                "subhref": "#",
                "subtext": "Sous-section 1"
            },
            {
                "subhref": "#",
                "subtext": "Sous-section 2"
            },
            {
                "subhref": "#",
                "subtext": "Sous-section 3"
            },
            {
                "subhref": "#",
                "subtext": "Sous-section 4"
            },
            {
                "subhref": "#",
                "subtext": "Deuxième section - Plus",
                "acronym": "Description de l'abréviation"
            }],
        }]
...
});