Exemple

Utilisez ce widget pour prendre en charge les exigences de conception d’application, telles que les suivantes :

• Vous devez créer une application de plusieurs pages et permettre aux utilisateurs de passer de page en page de manière simple et intuitive.

Remarques sur l'utilisation

Généralement, vous placez un menu au début d’une page, dans l’en-tête ou le corps. Le widget Menu (Menu) est alimenté automatiquement avec les pages, liens et dossiers, tels qu’ils apparaissent dans le volet Page. Les noms des pages, dossiers et liens apparaissent dans le menu suivant l’ordre que vous avez choisi, à moins que vous ne cliquiez sur Hide from menu (Masquer dans le menu) dans le volet Page. Lorsque vous imbriquez des pages et des liens dans une page ou un dossier, ils apparaissent dans le widget Menu (Menu) sous forme de menu déroulant. Un dossier fournit un menu déroulant qui permet de cliquer sur le niveau supérieur sans changer de page. Les utilisateurs interagissent avec ce menu en survolant le lien ou en cliquant dessus, pour retourner aux pages de votre expérience.

Paramètres

Le widget Menu (Menu) inclut les paramètres suivants :

• Type (Type) : permet de définir la position et l’apparence du menu (horizontal, vertical ou icône). Le type icône réduit verticalement le menu en une fenêtre modale sur la partie de gauche ou de droite de l’application.
  • Submenu expand mode (Mode de développement du sous-menu) : le sous-menu peut apparaître développé ou pliable pour les utilisateurs finaux. Ce paramètre n’est disponible que pour les menus de type vertical et icône, et il n’est évident dans votre application que s’il contient des pages imbriquées ou des liens.
• Appearance (Apparence) : définissez l’apparence des éléments de menu à l’aide des options suivantes :
  • Style : choisissez un style de menu : par défaut, souligné ou pilules. Les couleurs de chaque style sont héritées du thème de votre application.
  • Spacing (Espacement) : définissez l’espacement en pixels entre les pages répertoriées dans le menu.
  • Alignment (Alignement) : déterminez le placement du texte sur chaque élément de menu. Par exemple, si vous créez un menu horizontal et que vous choisissez le style Underline (Souligné), les noms des pages sont alignés avec la ligne (segment gauche ou droit) ou centrés.
  • Show icon (Afficher l’icône) : affichez une icône pour chaque élément de menu qui l’identifie comme une page, un lien ou un dossier. Vous pouvez changer l’icône par défaut dans le volet Page.
• Advanced (Avancé) : remplacez le thème de votre application et spécifiez le style, la taille et les couleurs de l’arrière-plan, du texte, de l’icône et des bordures du menu.
  • Background (Arrière-plan) : ajoutez une couleur d'arrière-plan au menu.
  • States (États) : affichez une représentation visuelle de l’état du menu à l’aide des différents paramètres de texte et de bordure. Par exemple, vous pouvez mettre le texte en gras, augmenter la taille de la police de caractères, et utiliser une couleur d’arrière-plan et un style de bordure différents pour l’état Selected (Sélectionné).
    • Default (Par défaut) : état par défaut du menu sans interaction utilisateur.
    • Hover (Survol) : l’utilisateur initie cet état en pointant vers un lien du menu.
    • Selected (Sélectionné) : sélection de l’utilisateur dans le menu.

    Conseil :

    Pour tester ces options, cliquez sur Live view (Vue en temps réel) dans la barre d’outils du générateur.