Styles de menu

Vous pouvez modifier l'apparence des éléments dans les menus qui sont fournis via la structure de menu JSON.

L'apparence des éléments dans les menus affichés par la structure de menu JSON est déterminée par les noms de styles qui apparaissent sur le marquage affiché pour les éléments du menu. Ces styles sont définis dans des fichiers CSS (Cascading Style Sheet) qui font partie du thème. Le thème par défaut possède ces feuilles de style dans le répertoire WebDAV themes/Portal8.5/css.
Capture d'écran du répertoire themes/Portal8.5/css dans WebDAV
Il existe deux façons de modifier l'apparence des éléments de menu.
  • Conservez les mêmes noms de style, mais modifiez la définition des styles nommés dans les fichiers css.
  • Modifiez les noms de style qui sont appliqués aux éléments de menu et fournissez les définitions et les implémentations des nouveaux styles.

La première méthode conserve les mêmes noms de style sur les éléments de menu, mais redéfinit l'apparence de ce style. Lorsque vous créez votre thème personnalisé, prenez comme exemple des copies des fichiers css de thème par défaut existants et modifiez-les de sorte à obtenir la présentation que vous souhaitez.

Pour la seconde approche, la syntaxe de définition du menu JSON permet la spécification d'un nom de style sur les éléments du menu, y compris les en-têtes et les séparateurs, à l'aide du membre itemClass dans une définition d'élément de menu. En ajoutant des entrées explicites pour les noms de style sur les éléments de menu, ces noms de style de remplacement sont utilisés dans le marquage résultant du menu. Le membre itemClass est utile uniquement sur des éléments de menu du type StaticMenuItem, DynamicMenuItem, Header, Separator et SubMenu. Sur SubMenu, le style est appliqué uniquement à l'entrée de sous-menu anchor link, et non aux éléments de menu qui composent ce sous-menu.

Ces fichiers CSS définissent les menus.
contextmenuCommon.css
Certains styles communs sont valides pour les pages structurées de gauche à droite et de droite à gauche.
contextmenu.css
Les styles de menus utilisés sur les pages structurées de gauche à droite.
contextmenuRTL.css
Les styles de menus utilisés sur les pages structurées de droite à gauche.

Styles de menu par défaut

Capture d'écran des styles de menu par défaut

Définitions des classes de style

wpthemeMenuShow
Par défaut, tous les menus sont masqués. Cette classe permet de contrôler la visibilité. Si elle est associée au noeud, le menu est visible.
wpthemeMenuLeft
Définit un menu orienté vers la gauche et qui s'ouvre vers la droite.
wpthemeMenuRight
Définit un menu orienté vers la droite et qui s'ouvre vers la gauche.
wpthemeMenuBorder
Définit la division principale div qui affiche la bordure et contient tous les éléments de menu.
wpthemeMenuNotchBorder
Définit la flèche désignant le bouton qui a ouvert le menu.
wpthemeMenuDropDown
Elément interne au menu contenant une liste d'éléments de menu.
wpthemeMenuitem
Décrit un élément de menu unique.
wpthemeMenuDisabled
Décrit un élément de menu désactivé.
wpthemeMenuLoading
Indique le texte qui s'affiche lorsque les données sont en cours de chargement.
wpthemeAnchorSubmenu
Permet d'enregistrer le sous-menu dans le marquage.
wpthemeTemplateMenu
Définit le modèle pour un élément de menu individuel.
wpthemeTemplateLoading
Définit le modèle pour le texte de chargement.
wpthemeTemplateSubmenu
Définit le modèle pour le sous-menu.
wpthemeMenuError
A afficher lorsqu'une erreur survient.

Le menu JavaScript se trouve dans dav:fs-type1/themes/Portal8.5/js/contextmenu.js.

L'objet JSON wptheme.contextmenu.css définit des constantes qui sont utilisées pour appliquer des classes CSS. Par défaut, les constantes sont définies sur :
contextMenu: {
...
css: {
disabled: "wpthemeMenuDisabled",
show: "wpthemeMenuShow",
error: "wpthemeMenuError",
menuTemplate: "wpthemeTemplateMenu",
submenuTemplate: "wpthemeTemplateSubmenu",
loadingTemplate: "wpthemeTemplateLoading"
},
....
}