Créer un menu déroulant dans Adobe Dreamweaver : HTML et CSS étape par étape

Dreamweaver simplifie la création d'un menu déroulant natif en HTML <select>, son style avec CSS et l'aperçu instantané. Suivez ces étapes pour obtenir un menu propre et accessible.

Étape 1 : Nouveau document HTML

1. Fichier → Nouveau document → HTML → Créer.
2. Basculez en Vue Code (ou Partagée).

Étape 2 : Ajouter le balisage du menu déroulant

À l'intérieur de <body>, insérez :

<label for="options">Choisissez une option :</label>
<select id="options" name="options">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Note : Associez toujours <select> à un <label> pour l'accessibilité.

Étape 3 : Aperçu

Cliquez sur Vue Dynamique (ou Aperçu dans le navigateur) pour tester le menu déroulant.

Étape 4 : Styliser avec CSS

Dans le panneau CSS Designer ou une feuille de style liée, ajoutez :

select {
  width: 200px;
  padding: 0.5rem;
  font: inherit;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}
label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

Étape 5 : Menu déroulant amélioré (optionnel)

Pour un menu déroulant personnalisé, accessible au clavier et ressemblant à un menu bouton, utilisez un motif <div> + <button> + <ul> avec des attributs ARIA — le widget « Insertion → Menu » de Dreamweaver (Bootstrap) peut le générer rapidement.

Étape 6 : Enregistrer et déployer

Enregistrez sous index.html ; téléversez sur votre serveur. Testez sur tous les navigateurs et lecteurs d'écran.

Le <select> natif est sémantique, léger et fonctionne partout. Stylisez-le minimalement pour la cohérence ; recourez aux widgets personnalisés seulement quand le design l'exige.