Creare un Menu a Tendina in Adobe Dreamweaver: HTML e CSS Passo-Passo

Dreamweaver rende facile costruire un nativo HTML <select> a tendina, stilizzarlo con CSS e visualizzarlo in anteprima istantaneamente. Segui questi passaggi per un menu pulito e accessibile.

Passaggio 1: Nuovo Documento HTML

1. File → Nuovo Documento → HTML → Crea.
2. Passa a Visualizzazione Codice (o Divisa).

Passaggio 2: Aggiungi Markup a Tendina

All'interno di <body>, inserisci:

<label for="options">Scegli un'opzione:</label> <select id="options" name="options"> <option value="1">Opzione 1</option> <option value="2">Opzione 2</option> <option value="3">Opzione 3</option> </select>

Nota: Accoppia sempre <select> con un <label> per l'accessibilità.

Passaggio 3: Anteprima

Clicca Visualizzazione Live (o Anteprima in Browser) per testare il menu a tendina.

Passaggio 4: Stile con CSS

Nel pannello CSS Designer o in un foglio di stile collegato, aggiungi:

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; }

Passaggio 5: Tendina Avanzata (Opzionale)

Per un tendina custom-styled, accessibile da tastiera, che assomiglia a un menu a pulsante, usa un pattern <div> + <button> + <ul> con attributi ARIA—il widget "Inserisci → Menu" di Dreamweaver (Bootstrap) può generarlo rapidamente.

Passaggio 6: Salva e Distribuisci

Salva come index.html; carica sul tuo server. Testa tra browser e screen reader.

Il nativo <select> è semantico, leggero e funziona ovunque. Stilizzalo minimamente per coerenza; ricorri a widget custom solo quando il design lo richiede.