Menu orizzontale con hover
Menu moderno con effetto al passaggio del mouse.
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.
hover
Dropdown semplice
Sottomenu visibile al passaggio del mouse.
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.
- Aggiungi una nuova voce al menu.
- Cambia colore allo stato hover.
- Crea un secondo dropdown con tre link.
- Rendi il menu verticale sotto i 600px.