# Menu déroulant

> Découvrez comment créer des menus et des listes déroulantes en utilisant le composant Multi-états et les transitions personnalisées dans PandaSuite pour une meilleure interactivité.

https://docs.pandasuite.com/fr/essentials/navigation/drop-down-menu/

**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.

[Vidéo : dans l'aperçu de l'app, un tap sur All gardens ouvre une liste de quatre jardins au-dessus du plan du parc, un second tap la referme]

## Créer un élément déroulant

Insérez un [composant Multi-état](https://docs.pandasuite.com/fr/essentials/components/multi-state/). Ce composant est très utile pour créer des animations et des transitions personnalisées sur vos objets.

[Image : 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).

[Image : Dans un Multi-état, le menu contient le bouton All gardens et quatre jardins]

Sélectionnez tous vos objets et [créez un groupe](https://docs.pandasuite.com/fr/essentials/components/group/) 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.

[Vidéo : dans l'état 1 « closed », les cinq objets sont sélectionnés et groupés avec Cmd + G, puis le groupe est réduit au seul bouton]

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**.

[Vidéo : la flèche à côté du + crée un état lié à « closed », puis le groupe est agrandi pour afficher les quatre jardins]

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**.

[Image : 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.