Menu Mobile
Scegli tra quattro stili distinti di menu mobile e configura esattamente come si comporta la navigazione su schermi piccoli — senza toccare CSS o JavaScript.
Impostare il breakpoint
Il breakpoint determina la larghezza dello schermo sotto la quale il menu desktop viene sostituito dal menu mobile. Il valore predefinito è 768 px, corrispondente alla larghezza tipica dei tablet in modalità verticale.
Se selezioni l'opzione Auto, Menu Builder sceglierà automaticamente il breakpoint in base alla larghezza del contenitore del menu, adattandosi dinamicamente al layout del tema.
Gli stili del menu mobile
1. Dropdown (Predefinito)
Il menu mobile a dropdown si apre verticalmente sotto il pulsante hamburger, all'interno del flusso della pagina. È lo stile più semplice e familiare.
- Non occupa l'intero schermo.
- Ideale per menu con poche voci.
2. Fullscreen
Il menu fullscreen si apre sopra l'intera pagina, coprendo tutto lo schermo con un overlay. Le voci sono centrate e solitamente mostrate con un font grande.
- Crea un impatto visivo forte.
- Ideale per siti creativi e portfolio.
3. Drawer — Sinistra
Il drawer sinistro scorre da sinistra verso destra, come un pannello laterale. Il contenuto della pagina rimane visibile sullo sfondo (spesso oscurato).
- Familiare agli utenti di app mobile native.
- Ideale per menu con molte voci e sottomenu profondi.
4. Drawer — Destra
Come il drawer sinistro, ma si apre dal lato destro dello schermo. Preferibile per siti RTL (da destra a sinistra) o per ragioni estetiche.
- Stessa funzionalità del drawer sinistro.
- Adatto a layout con navigazione posizionata a destra.
Puoi cambiare stile mobile in qualsiasi momento senza perdere la configurazione delle voci o del tema. Sperimenta con l'anteprima live per trovare lo stile più adatto al tuo sito.
Pulsante hamburger
Il pulsante hamburger (☰) è il controllo che gli utenti toccano per aprire il menu mobile. Puoi personalizzarlo dalle seguenti opzioni:
| Opzione | Descrizione |
|---|---|
| Stile icona | Icona hamburger (tre linee), croce (×), puntini o icona personalizzata. |
| Allineamento | Posiziona il pulsante a sinistra, al centro o a destra della barra mobile. |
| Colore icona | Colore delle linee dell'icona hamburger. |
| Sfondo del pulsante | Colore di sfondo del pulsante (trasparente per impostazione predefinita). |
Colori dei link mobile
I colori dei link nel menu mobile sono indipendenti da quelli del menu desktop e possono essere configurati separatamente:
- Normale — colore predefinito dei link nel menu mobile.
- Hover — colore dei link quando l'utente li tocca o ci passa sopra.
- Attivo — colore della voce che corrisponde alla pagina corrente.
Se non vengono configurati colori separati, il menu mobile eredita i colori del tema attivo.
Comportamento dei sottomenu su mobile
I sottomenu (dropdown) si comportano diversamente su mobile rispetto al desktop, dove si aprono al passaggio del mouse. Puoi scegliere tra due modalità:
- Accordion attivo — i sottomenu si espandono e si contraggono al tocco della voce genitore. Solo un sottomenu alla volta rimane aperto.
- Accordion disattivo — tutti i sottomenu sono espansi per impostazione predefinita, mostrando l'intera struttura del menu.
La modalità accordion è generalmente preferibile per menu con molti livelli di nidificazione, in quanto evita che il menu diventi troppo lungo.
Mega menu su mobile
I pannelli mega menu vengono adattati automaticamente per i dispositivi mobili: le colonne vengono impilate verticalmente e il contenuto viene presentato in formato accordion.
Puoi controllare il comportamento del mega menu su mobile per ogni singola voce:
- Visibile su mobile — il pannello viene mostrato come accordion espandibile.
- Nascosto su mobile — la voce si comporta come un link semplice su mobile.
I contenuti di tipo Shortcode all'interno delle colonne del mega menu vengono renderizzati normalmente anche su mobile, ma elementi complessi come slider o mappe potrebbero richiedere CSS personalizzato per adattarsi correttamente agli schermi piccoli.
Anteprima telefono live
La sezione Menu Builder → Mobile → Anteprima mostra una simulazione del menu mobile all'interno di un frame a forma di smartphone, aggiornata in tempo reale mentre modifichi le impostazioni. Utile per verificare l'aspetto senza dover ridimensionare la finestra del browser.
L'anteprima rispetta le preferenze di sistema per la riduzione del movimento (prefers-reduced-motion): se le animazioni sono disabilitate a livello di sistema operativo, anche l'anteprima non mostrerà animazioni.