Menu mobile apri e chiudi
Navigazione compatta controllata da un pulsante.
Quando si usa
Quando il menu principale non entra comodamente nella larghezza di smartphone e tablet.
Perché si usa
Il pulsante consente di mostrare i collegamenti solo quando servono, lasciando più spazio al contenuto.
Vantaggi principali
- Attributo aria-expanded aggiornato
- Codice indipendente da librerie
- Facile integrazione in un header esistente
Anteprima del risultato
Il menu mobile mostra un pulsante di apertura e una lista di collegamenti pensata per schermi piccoli.
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<button id="apriMenu" aria-expanded="false" aria-controls="menu">Menu</button>
<nav id="menu" hidden>
<a href="#">Home</a>
<a href="#">Guide</a>
<a href="#">Contatti</a>
</nav>
<script>
const bottone = document.getElementById('apriMenu');
const menu = document.getElementById('menu');
bottone.addEventListener('click', function(){
const aperto = bottone.getAttribute('aria-expanded') === 'true';
bottone.setAttribute('aria-expanded', String(!aperto));
menu.hidden = aperto;
});
</script>Da personalizzare: Cambia ID, testi, breakpoint CSS e collegamenti del menu.
Errore da evitare: Il pulsante deve restare raggiungibile da tastiera e deve indicare correttamente lo stato aperto o chiuso.