|
|
|
|
|
|
|
|
|
|
- Présentation du menu
- Création d'un menu déroulant
- Créer un menu déroulant
- Ajouter des options
- Options disponibles dans la description d'un menu
- Description d'un menu
- Style d'un menu
- Suppression d'un menu
WEBDEV permet de créer dans vos pages HTML : - un menu déroulant.
- un menu contextuel.
 Non disponible.
A partir des différentes options de ces menus, il est possible : - d'afficher des pages,
- d'exécuter le code de boutons présents dans la page,
- ...
En WEBDEV, le menu (déroulant ou contextuel) d'une page est considéré comme un champ. Ce champ a ses propres caractéristiques de style et dans le cas d'un menu déroulant, il peut être déplacé dans la page. Création d'un menu déroulant Créer un menu déroulant Pour créer un menu déroulant : - Sous le volet "Création", dans le groupe "Navigation", cliquez sur "Menu".
- Le menu apparaît automatiquement dans la page avec deux options par défaut.
- Le menu peut être déplacé dans la page à la position voulue.
Ajouter des options Pour ajouter des options, cliquez sur le menu sélectionné : un cadre jaune apparaît : le menu est en édition. Le menu contextuel des options de menu permet d'ajouter directement les options dans la page en édition. Pour plus de détails, consultez Manipuler les options de menu.
Remarques : - Pour éditer le menu, il est également possible de sélectionner le menu et utiliser une des méthodes suivantes :
- appuyer sur la touche Espace,
- appuyer sur la touche Entrée,
- afficher le menu contextuel et sélectionner l'option "Modifier ce menu".
- Pour ne plus être dans le menu en édition, utilisez la touche Echap (le cadre jaune disparaîtra).
Options disponibles dans la description d'un menu Description d'un menu Pour afficher la description d'un menu : - Cliquez une fois sur les options du menu.
- Si le cadre jaune n'est pas affiché : affichez le menu contextuel du menu et sélectionnez l'option "Description".
- Si le cadre jaune est affiché : affichez le menu contextuel du menu et sélectionnez l'option "Description du menu".
- Les différents onglets permettent de définir les caractéristiques du menu :
- L'onglet "Général" permet d'indiquer :
- le nom du menu,
- son orientation :
- Horizontal (par défaut) : Les options du menu sont affichées horizontalement.
- Vertical Popup : Les options du menu sont affichées verticalement. Les sous-options s'affichent à droite de l'option parente.
- Vertical Déroulant : Les options du menu sont affichées verticalement. Les sous-options s'affichent en dessous de l'option parente.
- l'option sélectionnée par défaut.
Remarque : L'option sélectionnée par défaut peut être modifiée par programmation avec la propriété Sélectionnée.
- L'onglet "UI" permet d'indiquer :
- si le menu est visible ou non.
- le traitement effectué sur les champs de la page (envoyer les données au serveur, ne rien envoyer, ...). Par défaut, lors du clic sur une option du menu, aucune donnée n'est envoyée au serveur.
- L'onglet "Avancé" permet de saisir le code HTML généré avant ou après le champ.
- L'onglet "Style" permet de définir :
- le style du menu.
- le style des sous-menus.
- les effets disponibles sur l'affichage des options de menu.
Style d'un menu La description du style d'un menu WEBDEV est réalisée dans l'onglet "Style" de la fenêtre de description du menu. Il est possible d'utiliser, de créer et de modifier : - les styles WEBDEV. Dans ce cas, la feuille de styles est modifiée.
- l'aspect du champ. Dans ce cas, le champ n'est pas lié à la feuille de styles.
Lors de la description du style WEBDEV d'un menu, il est possible d'indiquer : - Le style du menu principal : style du libellé, ...
- L'image de fond utilisée pour le menu principal.
- Le style des sous-menus : libellé, ...
- L'image des sous-menus : image de fond et image des options qui ouvrent un sous-menu.
- Les effets disponibles sur l'affichage des options de menu.
Remarque : Le bouton  déroule un menu permettant de sélectionner les images : - L'option "Parcourir" permet de sélectionner un fichier image accessible depuis votre poste.
- L'option "Catalogue" permet de chercher dans le catalogue d'images, les images correspondant aux options de menus (recherche effectuée dans les catégories "Menu principal", "Menu onglet", "Option de menu").
Les effets disponibles sur l'affichage des options de menuPlusieurs effets sont disponibles pour afficher les sous-menus d'un menu. - effet déroulé balayé (par défaut) : Lors du survol de l'option principale, les sous-menus sont déroulés avec un effet de translation jusqu'à la position définitive. Le bouton "Détail" de cet effet permet de paramétrer le sens de l'effet de translation.
- effet fondu (par défaut): Lors du survol de l'option principale, les sous-menus sont déroulés avec un changement progressif du style défini pour l'état normal au style défini pour le survol. Le bouton "Détail" de cet effet permet de paramétrer la durée de l'effet et son déclenchement.
- effet décalage : Lors du survol, les options du sous-menu sont déroulées avec un décalage pour chaque option survolée. Le bouton "Détail" de cet effet permet de paramétrer la durée de l'effet, le décalage effectué selon les différents axes et son déclenchement.
- effet déroulé amorti : Lors du survol de l'option principale, les sous-menus sont déroulés avec un effet d'amorti. Le bouton "Détail" de cet effet permet de paramétrer la durée de l'animation.
- effet déroulé étiré : Lors du survol de l'option principale, les sous-menus sont déroulés avec un effet d'étirement. Le bouton "Détail" de cet effet permet de paramétrer la durée de l'animation.
Remarque : La technologie utilisée pour ces effets est basée sur la norme CSS3. Certains navigateurs supportent partiellement les effets lorsque la page n'est pas au format HTML 5. WEBDEV offre la possibilité : - d'ajouter un effet : bouton "Ajouter un effet".
- de supprimer un effet : sélection de l'effet et clic sur le bouton "-".
- d'organiser les effets grâce aux boutons fléchés.
Attention : Certains effets ne sont pas compatibles et ne peuvent pas être utilisés en même temps. Pour supprimer un menu : - Sélectionnez le menu (le cadre jaune ne doit pas apparaître).
- Supprimez les options avec la touche Suppr.
Liste des exemples associés :
|
Exemples unitaires (WEBDEV) : Boîte à outils DHTML
[ + ] Réalisation d'un menu DHTML avec WEBDEV. Cet exemple permet de : - Créer un menu DHTML - Ajouter une entrée de menu - Ajouter une option de menu
|
|
Exemples unitaires (WEBDEV) : Le champ Zone Répétée Linéaire
[ + ] Utilisation du champ "Zone Répétée Linéaire" de WEBDEV. Le champ "Zone Répétée Linéaire" permet, par exemple, de réaliser des menus graphiques.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|