Generatore di menu responsive

Generatore di menu responsive: a cosa serve

Ogni sito ha bisogno di un menu che funzioni su computer e cellulare. Questo generatore crea il menu di navigazione con i tuoi link: affiancati sugli schermi grandi e con pulsante hamburger sotto il punto di rottura che scegli.

Il codice segue le buone pratiche di accessibilità: elemento nav con etichetta, pulsante con aria-expanded e aria-controls, chiusura con il tasto Esc e al tocco di un link, e animazione dell'icona che rispetta la preferenza per meno movimento. L'anteprima mostra il risultato in formato computer e cellulare allo stesso tempo.

Come si usa

1. Scrivi il nome del sito e i link.
2. Scegli i colori, il punto di rottura e se l'ultimo link diventa un pulsante.
3. Copia l'HTML, il CSS e il JavaScript o scarica la pagina di esempio.

Quando usarlo

• Sito istituzionale fatto a mano.
• Landing page senza framework.
• Sostituire un vecchio menu che non funziona sul cellulare.

Domande frequenti

Il menu è accessibile?

Sì. Il pulsante è un elemento button con aria-expanded e aria-controls, il menu si chiude con il tasto Esc e cliccando su un link, e la navigazione è dentro un elemento nav con aria-label. Funziona con tastiera e screen reader.

Funziona senza JavaScript?

Sul computer sì: i link compaiono sempre. Sul cellulare il pulsante ha bisogno del JavaScript per aprirsi; per questo il codice nasconde i link solo quando lo script si carica (classe js sull'html), e senza script compaiono impilati.

Quale punto di rottura usare?

Fino a circa cinque link brevi, 768 px funziona bene. Con più link o nomi lunghi, sali a 960 o 1024 px perché le voci non si schiaccino prima di diventare hamburger.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili