- Présentation du menu
- Création d'un menu
- Créer un menu
- 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 un menu déroulant dans vos pages HTML. A partir des différentes options de ce menu, il est possible : - d'afficher des pages,
- d'exécuter le code de boutons présents dans la page,
- ...
En WEBDEV, le menu d'une page est considéré comme un champ. Ce champ : - peut être déplacé dans la page,
- a ses propres caractéristiques de style.
Créer un menu Pour créer un menu : - Sous le volet "Création", dans le groupe "Navigation", cliquez sur "Menu".
- L'assistant de création de menu est automatiquement lancé. Cet assistant permet de sélectionner le style du menu, ou de créer un nouveau style (option "Je veux définir un nouveau style"). La création d'un nouveau style permet de donner toutes les caractéristiques de style pour le menu généré. Cette opération peut également être réalisée par la suite.
- Donnez un nom au menu et validez l'assistant. 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 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.
Remarque : 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 et 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.
- 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.
|
|
|
|
|