Accès
Pour insérer un objet Menu, il faut, au choix :
Choisir l'option Objets Adélia Web Studio/Menu du menu Insertion de la fenêtre Macromedia Dreamweaver®.
Effectuer un clic sur le bouton correspondant
dans la barre d'insertion des objets Adélia de Dreamweaver®.
Remarque importante : Pour modifier un objet Menu, insérer ou modifier des items de menu, sélectionner la balise correspondante dans DreamWeaver® soit en mode "Code", soit en mode "Création". Il est alors possible de modifier l'objet en utilisant l'inspecteur de propriétés de l'objet Menu.
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).
Cette boîte de dialogue permet de définir les différents attributs de l'objet Menu.
Propriétés
Général
Nom
Mot directeur Adélia de la liste.
Type
Type graphique du menu.
Une barre de menus est un menu à position fixe dont les items de premier niveau sont toujours visibles dans la page.
Un menu contextuel est un menu rendu visible sur un événement Javascript donné. Cet événement est défini dans la boîte de propriétés de l'objet Adélia associant ce menu.
Valeurs possibles :
- Barre de menus,
- Menu contextuel.
Rendu du menu contextuel
Permet d'afficher dans le maquetteur (en mode Création) la représentation graphique d'un menu contextuel (seuls les items de premier niveau sont affichés).
Case cochée |
L'objet Menu est dessiné dans la fenêtre du mode Création de Dreamweaver®. |
Case non cochée |
L'objet Menu n'est pas représenté graphiquement. Une image |
Orientation menu
Orientation d'affichage des items de premier niveau du menu.
L'orientation horizontale provoque l'affichage des items dans l'ordre de leur création, sur une même ligne, l'item suivant se trouvant à droite du précédent.
L'orientation verticale provoque l'affichage des items sur plusieurs lignes, l'item suivant se trouvant en-dessous du précédent.
Remarque : un menu accordéon a une orientation forcée à Verticale.
Valeurs possibles :
- Horizontale,
- Verticale.
Orientation sous-menu
Orientation d'affichage des items des sous-menus (item de énième niveau) du menu. L'orientation horizontale provoque l'affichage des items dans l'ordre de leur création, sur une même ligne, l'item suivant se trouvant à droite du précédent.
L'orientation verticale provoque l'affichage des items sur plusieurs lignes, l'item suivant se trouvant en-dessous du précédent.
Remarque : un menu accordéon a une orientation de ses sous-menus forcée à Verticale.
Valeurs possibles :
- Horizontale,
- Verticale.
Position sous-menu
Position d'affichage des items des sous-menus (item de énième niveau) du menu.
Si la position vaut "Sous l'item", alors chaque sous-menu est positionné sous l'item le définissant avec le même alignement à gauche. Si la position vaut "Sous le parent", alors chaque sous-menu est positionné sous son menu parent avec le même alignement à gauche.
Remarque : cette propriété n'est utilisable que si l'orientation des sous-menus est horizontale. Si les sous-menus ont une orientation verticale ou si le menu est un menu accordéon, alors la position des sous-menus est forcée à la valeur "Sous l'item".
Valeurs possibles :
- Sous l'item,
- Sous le parent.
Menu accordéon
Case cochée |
Définit le menu comme un menu accordéon. C'est un menu affiché verticalement sur une seule colonne. Les items définissant des sous-menus peuvent être expansés ou réduits. Lorsqu'un item est expansé, le sous-menu est affiché en-dessous de celui-ci. Une marge gauche indique la présence d'un sous-menu. Un seul item par niveau peut être expansé à la fois. Dans un menu accordéon, il est possible de fixer et/ou récupérer l'item cliqué via la propriété L4G NOM_ITEM_SELECT (un menu accordéon est aussi une barre d'onglets). |
Barre d'onglets
Case cochée |
Définit le menu comme une barre d'onglets. Celle-ci permet de gérer l'item sélectionné par programme (voir la propriété NOM_ITEM_SELECT de l' objet Menu ) ou lorsque l'utilisateur clique sur celui-ci. 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 un menu accordéon, 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. Il est possible de distinguer graphiquement l'item de menu sélectionné des autres items en définissant au maquettage de l'objet Menu des styles pour celui-ci (couleur de fond, couleur du texte, classe CSS du texte, classe CSS de l'item). |
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 le navigateur Internet Explorer.
Valeurs possibles :
Aucun |
le menu s'affiche instantanément, |
Fade in |
le menu s'affiche progressivement avec un effet de fondu, |
Pixelate |
le menu s'affiche progressivement avec un effet de pixellisation, |
Dissolve |
le menu s'affiche progressivement avec un effet de dissolution, |
Wipe down |
le menu s'affiche progressivement avec un effet de volet de haut en bas, |
Wipe right |
le menu s'affiche progressivement avec un effet de volet de gauche à droite. |
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.
Un menu accordéon a obligatoirement un nombre de lignes ou colonnes à 1.
Remarque : il est possible de modifier le nombre de lignes ou colonnes de chaque sous-menu en modifiant cette propriété pour l'item de menu correspondant (voir la section "Général" dans l'onglet "Propriétés d'un item" de l'inspecteur de propriétés de l'objet Menu).
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.
Pour une meilleure ergonomie, lorsque l'événement Javascript d'ouverture du menu est basé sur un clic de la souris (oncontextmenu, onclick, onmousedown, onmouseup), cette propriété doit être cochée.
Lorsque l'événement Javascript est basé sur un mouvement de la souris (onmouseover), cette propriété doit être décochée.
Case cochée |
L'utilisateur doit cliquer dans le fond de la page pour fermer un menu contextuel et tous les sous-menus ouverts. |
Case non cochée |
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. |
Remarque : la touche Échappement permet de fermer le dernier menu ou sous-menu ouvert.
Styles du menu
Couleur de fond
Couleur de fond du menu et de tous ses sous-menus. Cette couleur peut être définie soit :
- sous la forme d'un triplet Rouge Vert Bleu (ex : #FF0000),
- sous la forme une constante littérale HTML (ex : red).
Remarque : il est possible de définir une couleur de fond pour tous les items (voir la section "Styles des items de menu" plus bas) ou pour un item donné (voir la section "Couleurs de l'item" dans l'onglet "Propriétés d'un item" de l'inspecteur de propriétés de l'objet Menu). Dans ce cas, la couleur de fond d'un item est prioritaire sur celle de tous les items qui est elle-même prioritaire sur celle du menu.
Bordure
Définit l'allure de la bordure du menu et de ses sous-menus, c'est-à-dire :
- sa couleur,
- son épaisseur (en pixels),
- son style de trait.
Valeurs possibles pour le style du trait :
- none : aucune bordure,
- solid : trait plein,
- double : trait double,
- dotted : trait en pointillés,
- dashed : trait en discontinu,
- groove : trait en relief sortant,
- ridge : trait en relief entrant.
Image sous-menu niveau 1 (Normal)
Fixe, pour les items définissant des sous-menus de premier niveau, une image placée à droite du libellé. Cette image est affichée lorsque l'item est à l'état normal (c'est-à-dire lorsque le curseur de la souris est en dehors de l'item).
Image sous-menu niveau 1 (Survol)
Fixe, pour les items définissant des sous-menus de premier niveau, une image placée à droite du libellé. Cette image est affichée lorsque l'item est à l'état survolé (c'est-à-dire lorsque le curseur de la souris est sur l'item).
Position de l'image sous-menu niveau 1
Fixe la position des images (précisées dans les rubriques "Image sous-menu niveau 1 (Normal)" et "Image sous-menu niveau 1 (Survol)") à droite ou à gauche du libellé des items définissant des sous-menus de premier niveau.
Image sous-menu niveau n (Normal)
Fixe, pour les items définissant des sous-menus de énième niveau (autre que le premier niveau), une image placée à droite du libellé. Cette image est affichée lorsque l'item est à l'état normal (c'est-à-dire lorsque le curseur de la souris est en dehors de l'item).
Image sous-menu niveau n (Survol)
Fixe, pour les items définissant des sous-menus de énième niveau (autre que le premier niveau), une image placée à droite du libellé. Cette image est affichée lorsque l'item est à l'état survolé (c'est-à-dire lorsque le curseur de la souris est sur l'item).
Position de l'image sous-menu niveau n
Fixe la position des images (précisées dans les rubriques "Image sous-menu niveau n (Normal)" et "Image sous-menu niveau n (Survol)") à droite ou à gauche du libellé des items définissant des sous-menus de premier niveau.
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.
Styles des items de menu
Couleur de fond des items (Normal)
Définit la couleur de fond de tous les items à l'état normal (c'est-à-dire lorsque le curseur de la souris est en dehors de l'item). Cette couleur peut être définie soit :
- sous la forme d'un triplet Rouge Vert Bleu (ex : #FF0000),
- sous la forme d'une constante littérale HTML (ex : red).
Remarque : il est possible de définir une couleur de fond pour un item donné (voir la section "Couleurs de l'item" dans l'onglet "Propriétés d'un item" de l'inspecteur de propriétés). Dans ce cas, la couleur de fond d'un item est prioritaire sur celle de tous les items.
Couleur de fond des items (Survol)
Définit la couleur de fond de tous les items à l'état survolé (c'est-à-dire lorsque le curseur de la souris est sur l'item). Cette couleur peut être définie soit :
- sous la forme d'un triplet Rouge Vert Bleu (ex : #FF0000),
- sous la forme d'une constante littérale HTML (ex : red),
Remarque : il est possible de définir une couleur de fond pour un item donné (voir la section "Couleurs de l'item" dans l'onglet "Propriétés d'un item" de l'inspecteur de propriétés). Dans ce cas, la couleur de fond d'un item est prioritaire sur celle de tous les items.
Couleur du texte des items (Normal)
Définit la couleur du texte de tous les items à l'état normal (c'est-à-dire lorsque le curseur de la souris est en dehors de l'item). Cette couleur peut être définie soit :
- sous la forme d'un triplet Rouge Vert Bleu (ex : #FF0000),
- sous la forme une constante littérale HTML (ex : red),
Remarque : il est possible de définir une couleur du texte pour un item donné (voir la section "Couleurs de l'item" dans l'onglet "Propriétés d'un item" de l'inspecteur de propriétés). Dans ce cas, la couleur du texte d'un item est prioritaire sur celle de tous les items.
Couleur du texte des items (Survol)
Définit la couleur du texte de tous les items à l'état survolé (c'est-à-dire lorsque le curseur de la souris est sur l'item). Cette couleur peut être définie soit :
- sous la forme d'un triplet Rouge Vert Bleu (ex : #FF0000),
- sous la forme une constante littérale HTML (ex : red),
Remarque : il est possible de définir une couleur du texte pour un item donné (voir la section "Couleurs de l'item" dans l'onglet "Propriétés d'un item" de l'inspecteur de propriétés). Dans ce cas, la couleur du texte d'un item est prioritaire sur celle de tous les items.
Couleur du texte des items inactifs
Définit la couleur du texte d'un item inactif. Cette couleur peut être définie soit :
- sous la forme d'un triplet Rouge Vert Bleu (ex : #FF0000),
- sous la forme une constante littérale HTML (ex : red),
Un item est rendu inactif soit en maquettage (voir la propriété Actif dans la section "Styles de l'item" dans l'onglet "Propriétés d'un item" de l'inspecteur de propriétés), soit dans l'éditeur L4G en utilisant la propriété ACTIVITE.
Un item inactif n'a pas d'état survolé et ne peut pas déclencher d'événement Adélia.
Classe CSS du texte des items (Normal)
Définit la classe de style CSS affectée au libellé des items de menu à l'état normal (c'est-à-dire lorsque le curseur de la souris est en dehors de l'item).
Remarque : il est possible de définir une classe du texte pour un item donné (voir la section "Styles de l'item" dans l'onglet "Propriétés d'un item" de l'inspecteur de propriétés). Dans ce cas, la classe du texte d'un item est prioritaire sur celle de tous les items.
Classe CSS du texte des items (Survol)
Définit la classe de style CSS affectée au libellé des items de menu à l'état survolé (c'est-à-dire lorsque le curseur souris est sur l'item).
Remarque : il est possible de définir une classe du texte pour un item donné (voir la section "Styles de l'item" dans l'onglet "Propriétés d'un item" de l'inspecteur de propriétés). Dans ce cas, la classe du texte d'un item est prioritaire sur celle de tous les items.
Classe CSS des items (Normal)
Définit une classe de style CSS pour tous les items à l'état normal (c'est-à-dire lorsque le curseur de la souris est en dehors de l'item). Cette classe est affectée au conteneur (un tag HTML TD) de chaque item.
Remarque : il est possible de définir une classe pour un item donné (voir la section "Styles de l'item" dans l'onglet "Propriétés d'un item" de l'inspecteur de propriétés). Dans ce cas, la classe d'un item est prioritaire sur celle de tous les items.
Classe CSS des items (Survol)
Définit une classe de style CSS pour tous les items à l'état normal (c'est-à-dire lorsque le curseur de la souris est sur l'item). Cette classe est affectée au conteneur (un tag HTML TD) de chaque item.
Remarque : il est possible de définir une classe pour un item donné (voir la section "Styles de l'item" dans l'onglet "Propriétés d'un item" de l'inspecteur de propriétés). Dans ce cas, la classe d'un item est prioritaire sur celle de tous les items.
Styles de l'item sélectionné
Un item peut être sélectionné seulement s'il appartient à un menu accordéon ou à une barre d'onglets. Dans ce cas, un clic sur l'item permet de passer à l'état sélectionné. Il est aussi possible de fixer l'item sélectionné dans l'éditeur L4G en utilisant la propriété NOM_ITEM_SELECT.
Couleur de fond (Normal)
Définit la couleur de fond de l'item sélectionné à l'état normal (c'est-à-dire lorsque le curseur de la souris est en dehors de l'item). Cette couleur peut être définie soit :
- sous la forme d'un triplet Rouge Vert Bleu (ex : #FF0000),
- sous la forme d'une constante littérale HTML (ex : red).
Couleur de fond (Survol)
Définit la couleur de fond de l'item sélectionné à l'état survolé (c'est-à-dire lorsque le curseur de la souris est sur l'item). Cette couleur peut être définie soit :
- sous la forme d'un triplet Rouge Vert Bleu (ex : #FF0000),
- sous la forme d'une constante littérale HTML (ex : red).
Couleur du texte (Normal)
Définit la couleur du texte de l'item sélectionné à l'état normal (c'est-à-dire lorsque le curseur de la souris est en dehors de l'item). Cette couleur peut être définie soit :
- sous la forme d'un triplet Rouge Vert Bleu (ex : #FF0000),
- sous la forme d'une constante littérale HTML (ex : red).
Couleur du texte (Survol)
Définit la couleur du texte de l'item sélectionné à l'état survolé (c'est-à-dire lorsque le curseur de la souris est sur l'item). Cette couleur peut être définie soit :
- sous la forme d'un triplet Rouge Vert Bleu (ex : #FF0000),
- sous la forme d'une constante littérale HTML (ex : red).
Classe CSS du texte (Normal)
Définit la classe de style CSS affectée au libellé de l'item sélectionné de menu à l'état normal (c'est-à-dire lorsque le curseur de la souris est en dehors de l'item).
Classe CSS du texte (Survol)
Définit la classe de style CSS affectée au libellé de l'item sélectionné de menu à l'état survolé (c'est-à-dire lorsque le curseur de la souris est sur l'item).
Classe CSS (Normal)
Définit une classe de style CSS pour l'item sélectionné à l'état normal (c'est-à-dire lorsque le curseur de la souris est en dehors de l'item). Cette classe est affectée au conteneur (un tag HTML TD) de l'item.
Classe CSS (Survol)
Définit une classe de style CSS pour l'item sélectionné à l'état survolé (c'est-à-dire lorsque le curseur souris est sur l'item). Cette classe est affectée au conteneur (un tag HTML TD) de l'item.
Evénement
OnBeforeAppear
Case cochée |
Un traitant d'événement Adélia est affecté, en réaction à la demande d'apparition d'un menu de type menu contextuel. Le traitant d'événement peut être soit un événement Adélia (validant le formulaire ou non), soit une expression Javascript. Cet événement peut être utilisé pour configurer un menu et l'ensemble de ses items en fonction d'un contexte d'utilisation donné. Attention : cet événement est de type AJAX exclusivement. |
Remarque : l'ajout d'un traitant d'événement OnBeforeAppear sur un objet Menu nommé MNU_1 crée, dans le source L4G, lors de la sauvegarde de la page HTML, un bloc événement MNU_1:ONBEFOREAPPEAR imbriqué dans le bloc objet MNU_1, lui-même imbriqué dans le bloc GESTION EVENEMENT.
OnClickDynItem
Case cochée |
Un traitant d'événement Adélia est affecté, en réaction au clic souris par l'utilisateur sur un item de menu ajouté dynamiquement (via la méthode AJOUTER_ITEM_MENU). Le traitant d'événement peut être soit un événement Adélia (validant le formulaire ou non), soit une expression Javascript. |
Remarques :
La propriété NOM_ITEM_DYN donne le nom de l'item sur lequel l'utilisateur a cliqué.
L'ajout d'un traitant d'événement OnClickDynItem sur un objet Menu nommé MNU_1 crée, dans le source L4G, lors de la sauvegarde de la page HTML, un bloc événement MNU_1:ONCLICKDYNITEM imbriqué dans le bloc objet MNU_1, lui-même imbriqué dans le bloc GESTION EVENEMENT.
Cliquer ici pour plus d'informations sur les traitants d'événements Adélia.