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.

Composant Multi-état inséré au-dessus du plan du parc et sélectionné, avec la section Multi-state de ses propriétés

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

Dans le Multi-état, l'état 1 « closed » contient tout le contenu : le bouton All gardens et ses quatre jardins

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

Dans la liste des états, cliquez sur la flèche à côté du + et choisissez Créer un état lié. Dans ce deuxième état, agrandissez le groupe pour afficher les éléments de la liste. Ce deuxième état représente le menu déroulant quand il est ouvert : renommez-le open.

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 Tape clic et l’action Agir sur un composant. Le Studio propose alors une Sélection interactive : désignez le Multi-état comme cible, choisissez Sélectionner un état et l’état open.

Fenêtre Action du bouton Menu button dans l'état 1 : au Tape clic, Select state fait passer Multi-state18029 à l'état « open » en 0,4 s

Dans l’état 2, le bouton porte déjà cette action, car un état lié recopie les actions de ses objets. Sélectionnez le bouton, cliquez sur l’action et choisissez l’état closed : le lien est rompu pour cette action seulement, et le bouton referme désormais le menu déroulant.