Objet permettant de représenter une barre de menus ou un menu contextuel.
Un menu est un ensemble d'objets Item de menu regroupés sous une forme arborescente.
Dans la documentation on distingue deux groupes d'items :
- les items de premier niveau (ou niveau 1) sont les items qui n'ont pas de parent (ceux qui sont directement visibles dans le menu sans qu'il y ait besoin d'expanser un sous-menu),
- les items de énième niveau (ou niveau n) sont les items qui ont un parent (ceux qui sont visibles en expansant un sous-menu).
Un item peut être dans l'un des trois états suivants :
- Normal (ou état normal) : le curseur de la souris ne se trouve pas à l'intérieur du rectangle définissant la position de l'item.
- Survol (ou état survolé) : le curseur de la souris se trouve à l'intérieur du rectangle définissant la position de l'item. Un item possédant cet état indique que l'utilisateur peut potentiellement cliquer dessus.
- Sélectionné : dans le contexte d'une barre d'onglets, cet état permet de distinguer un item particulier. Un item peut être sélectionné soit par l'interface (lorsque l'utilisateur clique dessus), soit par programmation.
Il est possible de définir des propriétés graphiques pour ces trois états.
L'objet Menu possède un certain nombre de caractéristiques graphiques permettant de personnaliser l'affichage :
| Caractéristique | Description |
Type |
Une barre de menus est un menu à position fixe dont les items de premier niveau sont toujours visibles dans la page. |
Orientation |
Définit l'orientation d'affichage des items de premier niveau. L'orientation peut être horizontale ou verticale. |
Orientation des sous-menus |
Définit l'orientation d'affichage des items de énième niveau. L'orientation peut être horizontale ou verticale. |
Position des sous-menus |
Définit la position d'affichage des items de énième niveau. La position peut être "sous l'item" ou "sous le parent". |
Menu accordéon |
Définit l'affichage des items de menu sous la forme d'un accordéon. Un menu accordéon est un menu vertical dont les sous-menus s'affichent sous l'item parent. Dans un même niveau, un seul sous-menu peut être expansé à la fois. Une barre de menus en accordéon est aussi une barre d'onglets. |
Barre d'onglets |
Menu permettant de gérer l'item sélectionné. Un seul item peut être sélectionné à la fois. Dans un menu non accordéon, seuls les items de premier niveau peuvent prendre l'état sélectionné. Dans une barre de menus accordéons, tous les items (qui ne sont pas des séparateurs) peuvent prendre l'état sélectionné. Dans ce contexte, lorsque l'item sélectionné est fixé par programme, les sous-menus sont automatiquement expansés pour rendre cet item visible. |
Effet visuel |
Définit l'effet visuel d'apparition du menu (dans le cas d'un menu contextuel) et de tous les sous-menus. Cette propriété n'est supportée que par Internet Explorer. |
Opacité |
Définit l'opacité (en pourcentage) des sous-menus. Une valeur de 100% définit un sous-menu totalement opaque. A l'inverse, une valeur de 0% définit un sous-menu totalement transparent. |
Nombre de lignes ou colonnes |
Définit le nombre de lignes ou colonnes (suivant l'orientation du menu) à utiliser pour afficher les items de premier niveau d'un menu. Si le menu a une orientation horizontale, ce nombre est un nombre de lignes. Dans ce cas, chaque item et son suivant sont sur une ligne différente. Si le menu a une orientation verticale, ce nombre est un nombre de colonnes. Dans ce cas, chaque item et son suivant sont sur une colonne différente. |
Fermeture sur clic page |
Définit le mode de fermeture d'un menu contextuel et des sous-menus. Cette propriété permet d'être en phase par rapport au mode d'ouverture du menu (événement Javascript ONCONTEXTMENU, ONMOUSEOVER, ONCLICK, etc.). Si cette propriété est activée, l'utilisateur doit cliquer dans le fond de la page pour fermer un menu contextuel et tous les sous-menus ouverts. Dans le cas contraire, l'utilisateur doit positionner le curseur de la souris en dehors d'un item de menu pour fermer un menu contextuel et tous les sous-menus ouverts. Pour une meilleure ergonomie, lorsque l'événement Javascript d'ouverture du menu est basé sur un clic souris (oncontextmenu, onclick, onmousedown, onmouseup), cette propriété doit être activée. Lorsque l'événement Javascript est basé sur un mouvement souris (onmouseover), cette propriété doit être désactivée. Remarque : la touche Echappement permet de fermer le dernier menu ou sous-menu ouvert. |
Couleur de fond |
Définit la couleur de fond du menu et de tous ses sous-menus. |
Bordure |
Définit l'allure de la bordure du menu et de ses sous-menus (couleur, épaisseur et style du trait). |
Image des sous-menus de niveau 1 |
Définit, pour tous les items de premier niveau ayant des fils, une image à l'état normal et à l'état survolé. Ces images s'affichent à la droite du libellé de l'item. |
Position de l'image des sous-menus de niveau 1 |
Définit la position de l'image précisée plus haut par rapport au libellé de l'item de menu. |
Image des sous-menus de niveau n |
Définit, pour tous les items de énième niveau ayant des fils, une image à l'état normal et à l'état survolé. Ces images s'affichent à la droite du libellé de l'item. |
Position de l'image des sous-menus de niveau n |
Définit la position de l'image précisée plus haut par rapport au libellé de l'item de menu. |
Classe CSS des sous-menus |
Définit une classe de style CSS pour tous les sous-menus de l'objet Menu. Cette classe est affectée au conteneur (un tag HTML DIV) de chaque sous-menu. |
Couleur de fond des items |
Définit une couleur de fond pour tous les items à l'état normal et à l'état survolé. |
Couleur du texte des items |
Définit une couleur du texte du libellé pour tous les items à l'état normal et à l'état survolé. |
Couleur du texte des items inactifs |
Définit la couleur du texte du libellé des items inactifs. Un item inactif ne peut pas prendre l'état survolé et n'est pas réactif au clic de souris de l'utilisateur. |
Classe CSS du texte des items |
Définit une classe de style CSS pour le texte du libellé de tous les items de menu à l'état normal et à l'état survolé. |
Classe CSS des items |
Définit une classe de style CSS pour tous les items de menu à l'état normal et à l'état survolé. Cette classe est affectée au conteneur (un tag HTML TD) de chaque item. |
Styles de l'item sélectionné |
Il est possible de définir des caractéristiques graphiques pour l'item se trouvant à l'état sélectionné (couleur de fond, couleur du texte, classe CSS du texte, classe CSS de l'item). |
La création d'objets ITEM MENU se fait dans DreamWeaver®, par l'intermédiaire de l'inspecteur de propriétés de l'objet Menu.
Chaque item de menu possède un certain nombre de caractéristiques graphiques permettant de personnaliser son affichage :
| Libellé | Texte de l'item |
Séparateur |
Définit si un item est un séparateur. Un item séparateur ne peut pas prendre l'état survolé et n'est pas réactif au clic souris de l'utilisateur. Un séparateur ligne n'a pas de libellé et est représenté graphiquement par une ligne horizontale. Un séparateur texte a un libellé. Il permet de représenter graphiquement des sections dans un menu : tous les items qui le suivent ont une marge gauche. |
Nombres de lignes ou colonnes |
Définit le positionnement des items constituant le sous-menu défini par l'item. |
Actif |
Définit l'activité de l'item. |
Visible |
Définit la visibilité de l'item. |
Image associées |
Définit une image placée à gauche du libellé de l'item à l'état normal et à l'état survolé. |
Classes CSS du texte |
Définit une classe de style CSS pour le texte du libellé de l'item de menu à l'état normal et à l'état survolé. Cette classe est prioritaire par rapport à celle définie au niveau menu, pour tous les items de menu. |
Classes CSS |
Définit une classe de style CSS pour l'item de menu à l'état normal et à l'état survolé. Cette classe est affectée au conteneur (un tag HTML TD) de chaque item. Cette classe est prioritaire par rapport à celle définie au niveau menu, pour tous les items de menu. |
Couleurs de fond |
Définit une couleur de fond de l'item à l'état normal et à l'état survolé. Cette couleur est prioritaire par rapport à celle définie au niveau menu, pour tous les items de menu. |
Couleurs du texte |
Définit une couleur du texte du libellé de l'item à l'état normal et à l'état survolé. Cette couleur est prioritaire par rapport à celle définie au niveau menu, pour tous les items de menu. |
Utilisation d'un menu contextuel
Pour utiliser un menu contextuel sur un contrôle Adélia Web, il faut lier le menu à celui-ci (dans la boîte de création du contrôle ou dans son inspecteur de propriétés dans Dreamweaver®). Il est possible de lier plusieurs contrôles Adélia à un même objet Menu (la propriété L4G OBJ_ORIGINE de l'objet Menu, utilisée dans un traitant d'événements d'un item de menu, permet de savoir sur quel objet Adélia l'utilisateur a ouvert le menu).
Il est aussi possible de choisir l'événement Javascript qui déclenchera l'ouverture du menu contextuel.
Remarque sur l'utilisation de l'événement "oncontextmenu" :
Avec cet événement, le menu s'ouvre lorsque l'utilisateur clique sur le contrôle associé avec le bouton droit de la souris. Par défaut, sur cet événement, le navigateur ouvre un menu système. Pour afficher ce menu à la place du menu Adélia, appuyez sur la touche Ctrl lors du clic bouton droit.
Cas d'un menu contextuel dans une table liste
Si on utilise un menu contextuel lié à un contrôle Adélia "colonne" d'une table liste, alors dans un traitant d'événements du menu ou d'un item de menu, il est possible de savoir sur quelle ligne effectuer le traitement :
- dans une liste en mono-sélection, cette ligne devient la ligne sélectionnée et peut être récupérée via un LECTURE_LST *SELECT,
- dans une liste en multi-sélection, on considère que le traitement s'applique aux lignes précédemment sélectionnées par l'utilisateur.
Remarque : il est possible, dans un objet TABLE LISTE, de distinguer visuellement la ligne survolée par le curseur souris (voir le style Couleur/Classe dans Insérer un objet Table liste).
L'objet Menu utilise, en plus des propriétés graphiques, un certain nombre de classes de style CSS prédéfinies (dans la feuille de styles AWSGUIControls.jsp du répertoire AWSResources).
Lorsqu'on a plusieurs menus (dans une même page ou dans plusieurs parties d'un même canevas), il est possible de surcharger les classes générales en leur affectant des valeurs d'attributs différentes pour chaque menu.
Suivant la balise à laquelle la classe est affectée, il faut procéder comme suit :
Pour chaque classe dont on connaît la valeur de l'attribut ID de la balise, il faut utiliser la classe nommée correspondant à la valeur de l'ID.
| Classe | ID de la balise | Classe nommée |
AWSMenuDiv |
divMnu<NOM_OBJET_MENU> |
#divMnu<NOM_OBJET_MENU> |
AWSMenuTbl |
tblMnu<NOM_OBJET_MENU> |
#tblMnu<NOM_OBJET_MENU> |
AWSMenuTblSm |
tblSmMnu<NOM_OBJET_MENU><NOM_OBJET_ITEM> |
#tblSmMnu<NOM_OBJET_MENU><NOM_OBJET_ITEM> |
AWSMenuTblI |
tblIMnu<NOM_OBJET_MENU><NOM_OBJET_ITEM> |
#tblIMnu<NOM_OBJET_MENU><NOM_OBJET_ITEM> |
Si la classe nommée surcharge un attribut déjà défini dans la classe générale, il faut caractériser cet attribut avec !important.
Exemple :
.AWSMenuDiv { /* classe utilisée par tous les menus de la page */
width:300px;
}
#divMnuMNU_2 { /* classe utilisée seulement par le menu MNU_2 */
position:absolute;
left:10px;
right:10px;
width: 500px !important;
}
Pour une classe dont on ne connaît pas la valeur de l'attribut ID de la balise, ou si le nombre de classes nommées à créer est trop important (cas de la classe AWSMenuTblI affectée à chaque item de menu, par exemple), il faut définir une classe en utilisant la règle CSS ancêtre descendant.
Si la balise fait partie de la barre de menus ou d'un menu contextuel, il faut utiliser comme ancêtre le DIV du menu général.
Exemples :
#divMnuMNU_2 .AWSMenuTbl {
}
#divMnuMNU_2 .AWSMenuTblI {
}
Si la balise fait partie d'un sous-menu, il faut utiliser comme ancêtre le DIV du sous-menu.
Exemples :
#divSmMnuMNU_2ITE1 .AWSMenuTblSm {
}
#divSmMnuMNU_2ITE1 .AWSMenuTblI {
}
Pour une meilleure compréhension des fonctionnalités graphiques de cet objet, il est conseillé d'étudier les exemples fournis dans la base de connaissances Adélia (dans le domaine EXEMPLE_WEB de l'environnement BDCADEL).
Cliquez ci-dessous pour plus de détails sur :