Menu déroulant

Créez des menus et des listes déroulantes en utilisant notre composant Multi-états et les transitions.

Qu’est-ce qu’un élément déroulant (drop-down) ?

Un élément déroulant est une superposition contextuelle permettant d’afficher des listes de liens et bien plus encore. On peut les ouvrir en cliquant dessus. C’est un excellent moyen d’afficher des éléments de menu ou des listes.

Créer un élément déroulant

Insérez un composant Multi-état. Ce composant est très utile pour créer des animations et des transitions personnalisées sur vos objets.

Entrez dans ce composant et ajoutez tout le contenu de votre objet déroulant (bouton + éléments de liste).

Sélectionnez tous vos objets et créez un groupe en utilisant la commande Ctrl+G ou Cmd+G. Masquez pour n’afficher que le bouton déroulant. Ce premier état représente la liste déroulante quand elle est fermée.

Créez un nouvel état lié dans le composant Multi-états en cliquant sur le bouton orange et modifiez le masque pour afficher les éléments de la liste. Ce deuxième état représente le menu déroulant quand il est ouvert.

Créez maintenant l’action pour ouvrir l’élément déroulant. Passez à l’état 1 et sélectionnez le bouton déroulant. Cliquez sur Actions, choisissez Simple tap et l’action Interagir avec un composant > Multi-états > Aller à l’état 2.

Faites de même sur l’état 2 pour fermer le menu déroulant.