Navigazione

Menu CSS3

Un menu deve essere leggibile, coerente e accessibile. CSS permette di gestire spaziature, hover, dropdown e stati attivi.

Teoria rapida

HoverComunica che una voce è interattiva.
ActiveIndica la pagina corrente.
DropdownMostra opzioni secondarie.

Esempi interattivi

Modifica il codice e osserva l’anteprima live.

Menu orizzontale con hover

Menu moderno con effetto al passaggio del mouse.

hover
Codice modificabile
Risultato live

Dropdown semplice

Sottomenu visibile al passaggio del mouse.

position
Codice modificabile
Risultato live
Verifica

Quiz su Menu CSS3

Rispondi alle domande per controllare subito la comprensione dell’argomento.

1. Quale pseudo-classe si usa al passaggio del mouse?

2. A cosa serve una classe active?

3. Quale proprietà aiuta a posizionare un dropdown assoluto?

4. Per togliere la sottolineatura ai link si usa...

5. Quale proprietà crea una transizione fluida?

6. Un menu accessibile dovrebbe essere...

Esercitazione libera

Laboratorio libero: Menu CSS3

Parti dagli esempi della pagina, modifica il codice e crea una variante personale. Salva una copia del codice quando ottieni il risultato desiderato.