Layout & Effetti
Metti a punto la disposizione della barra di navigazione, rendila fissa in cima mentre i visitatori scorrono la pagina e aggiungi animazioni eleganti — tutto dalla sezione Layout di Menu Builder.
Spaziatura e allineamento
Dalla sezione Menu Builder → Layout → Spaziatura puoi controllare le dimensioni e la distribuzione degli elementi nella barra di navigazione:
- Padding della barra — spaziatura interna superiore e inferiore della barra (influisce sull'altezza totale).
- Gap tra le voci — spazio orizzontale tra i link di menu adiacenti.
- Allineamento delle voci — allinea le voci a sinistra, al centro o a destra della barra.
- Larghezza massima del contenuto — limita la larghezza della barra su schermi molto larghi.
- Padding dei dropdown — spaziatura interna dei pannelli dropdown e mega menu.
Navigazione sticky
La navigazione sticky mantiene la barra di navigazione visibile in cima alla finestra del browser mentre l'utente scorre verso il basso nella pagina.
| Opzione | Descrizione |
|---|---|
| Riduci allo scroll | La barra si riduce in altezza dopo un certo numero di pixel di scroll, per occupare meno spazio. |
| Ombra | Aggiunge un'ombra sotto la barra sticky per separarla visivamente dal contenuto. |
| Replica layout | Clona il layout della barra principale (logo, voci) anche nella versione sticky. |
| Transizione | Durata e curva della transizione di ridimensionamento della barra sticky. |
| Z-index | Livello di impilamento della barra sticky rispetto ad altri elementi della pagina. |
Barra di avanzamento scroll
Una sottile barra colorata in cima alla pagina che si riempie man mano che il visitatore scorre verso il basso, indicando la percentuale di contenuto già letta.
- Vai su Menu Builder → Layout → Effetti e attiva Barra di avanzamento scroll.
- Scegli il colore della barra di avanzamento.
Animazione di ingresso
L'animazione di ingresso fa apparire la barra di navigazione con un effetto visivo al caricamento della pagina — ad esempio una dissolvenza dall'alto o uno scivolamento verso il basso.
Puoi scegliere tra vari stili di animazione e configurare la durata e il ritardo dall'opzione Animazione di ingresso nella sezione Layout. Se preferisci un'esperienza più sobria, lascia l'animazione disabilitata (predefinita).
Animazione hover sui link
Aggiungi un effetto visivo quando il cursore passa sopra le voci del menu. Le opzioni disponibili includono: sottolineatura animata, sfondo con dissolvenza, sottolineatura che si espande dal centro, bordo inferiore colorato e altri stili decorativi.
Indicatore dropdown
L'indicatore dropdown è un'icona (tipicamente una freccia o uno chevron) che segnala visivamente agli utenti che una voce di menu ha un sottomenu o un mega menu.
Puoi scegliere lo stile dell'icona (freccia, chevron, triangolo, nessuno), il colore e il comportamento di rotazione: molti stili ruotano l'icona di 180° quando il dropdown è aperto, fornendo un feedback visivo immediato.
Scroll Spy
La funzione Scroll Spy aggiorna automaticamente la voce di menu "attiva" in base alla sezione della pagina attualmente visibile nel viewport — utile per le pagine a scorrimento singolo con ancoraggi.
- Vai su Menu Builder → Layout → Scroll Spy e attiva la funzione.
- Assicurati che le voci di menu puntino ad ancoraggi nella pagina (es.
#sezione-1). - Mentre l'utente scorre, la voce corrispondente alla sezione visibile viene evidenziata automaticamente.
La voce attiva riceve la classe CSS active e i colori configurati per lo stato attivo nel tema.
Scroll Spy rispetta le preferenze di sistema per la riduzione del movimento (prefers-reduced-motion): le transizioni di evidenziazione vengono saltate se l'utente ha disabilitato le animazioni nel sistema operativo.