PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation du menu
  • Création d'un menu
  • Créer un menu
  • Ajouter des options
  • Afficher la description d'un menu
  • Style d'un menu
  • Suppression d'un menu
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
Présentation du 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éation d'un menu

Créer un menu

Pour créer un menu :
  1. Sous l'éditeur de pages, sélectionnez l'option "Insertion .. Menu".Sous le volet "Création", dans le groupe "Navigation", cliquez sur "Menu".
  2. 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.
  3. Donnez un nom au menu et validez l'assistant. Le menu apparaît automatiquement dans la page avec deux options par défaut.
  4. 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).

Afficher la description d'un menu

Pour afficher la description d'un menu :
  1. 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".
  2. 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.
    • L'onglet "IHM" 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.
      • Versions 18 et supérieures
        les effets disponibles sur l'affichage des options de menu.
        Nouveauté 18
        les effets disponibles sur l'affichage des options de menu.
        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.
  • Versions 18 et supérieures
    Les effets disponibles sur l'affichage des options de menu.
    Nouveauté 18
    Les effets disponibles sur l'affichage des options de menu.
    Les effets disponibles sur l'affichage des options de menu.
Remarque : Le bouton "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").Remarque : Le bouton Bouton déroulant 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").
Versions 18 et supérieures
Les effets disponibles sur l'affichage des options de menu
Plusieurs 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.
Nouveauté 18
Les effets disponibles sur l'affichage des options de menu
Plusieurs 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.
Les effets disponibles sur l'affichage des options de menu
Plusieurs 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.
Suppression d'un menu
Pour supprimer un menu :
  1. Sélectionnez le menu (le cadre jaune ne doit pas apparaître).
  2. Supprimez les options avec la touche Suppr.
Liste des exemples associés :
Boîte à outils DHTML 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
Le champ Zone Répétée Linéaire 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.
Version minimum requise
  • Version 9
Commentaires
Utilisation d'image pour personnaliser un champ menu
Pour personnaliser l'apparence d'un menu, il suffit de spécifier, dans l'onglet "Style" de la description d'un menu. :
- une image de fond pour le menu principal
- une image de fond pour les sous_menus


Ces images sont composé des 4 états suivants: repos, survolé, enfoncé, grisé.
Permettant de gérer les caractéristiques d'affichage en fonction de l'action réalisée par l'utilisateur.
S LAUNAY
29 mar. 2010