Quando usare questo esempio
Menu essenziale con link ben distanziati, hover e focus visibile.
Copialo in una pagina di prova, cambia testi e colori, poi integralo nel tuo progetto solo dopo aver capito il ruolo di ogni classe.
HTML
La struttura HTML resta semantica: usa elementi riconoscibili e attributi utili per l’accessibilità.
<nav class="demo-menu" aria-label="Menu esempio">
<a href="#" class="active">Home</a>
<a href="#">Lezioni</a>
<a href="#">Esercizi</a>
<a href="#">Contatti</a>
</nav>
CSS commentato
Il CSS punta alla semplicità: poche classi, proprietà leggibili e comportamento responsive prevedibile.
.demo-menu { display: flex; flex-wrap: wrap; gap: 10px; }
.demo-menu a { padding: 10px 14px; border-radius: 999px; color: #475569; }
.demo-menu a:hover,
.demo-menu a.active { background: #eaf1ff; color: #1d4ed8; }
.demo-menu a:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
Commenti didattici
- `flex-wrap` impedisce al menu di uscire dallo schermo.
- Lo stato `.active` comunica la pagina corrente.
- `:focus-visible` rende il menu usabile anche da tastiera.
Prova pratica: cambia un solo valore alla volta, per esempio `gap`, `padding` o `border-radius`, e osserva come cambia il componente.
Continua con gli esempi
Apri l’esempio successivo oppure torna alla raccolta completa.