SuperSite offre alcuni componenti per costruire la navigazione del sito: il menu orizzontale, che è il sistema di navigazione principale, il menu verticale in colonna, il menu hamburger con pannello a scomparsa e il pulsante Torna su, che riporta il visitatore all'inizio della pagina. I tre menu si gestiscono e si personalizzano quasi allo stesso modo, senza scrivere codice.
Scegliere il menu giusto
Il menu orizzontale è il sistema di navigazione principale: mostra le voci su una barra in alto, evidenzia in automatico la pagina corrente e gestisce i sottomenu. È la scelta più comune per la testata del sito.
Il menu verticale dispone le voci una sotto l'altra, in colonna. È utile per i siti con molte sezioni o quando preferisci una navigazione laterale.
Il menu hamburger è il pulsante a tre linee che apre un pannello di navigazione. È adatto quando hai molte pagine o vuoi un aspetto pulito, sia su smartphone sia su computer.
Il pulsante Torna su non è un menu, ma una piccola icona fissa che con un clic riporta il visitatore all'inizio delle pagine lunghe.
Gestire le voci del menu
I menu orizzontale, verticale e hamburger condividono lo stesso modo di gestire le voci.
Con Aggiungi Pagina (o Aggiungi voce) crei insieme la voce di menu e la pagina collegata, senza doverla preparare prima. Per rinominare una voce, fai doppio clic sul testo; se la pagina è già presente sui motori di ricerca, un avviso ti ricorda che cambiare il nome può invalidare i vecchi collegamenti.
Puoi collegare ogni voce a una nuova pagina, a una pagina già esistente del sito o a un indirizzo esterno. Riordina le voci con il trascinamento ed elimina quelle che non servono, confermando quando richiesto.
Per creare un sottomenu, aggiungi delle sottovoci alla voce principale: compaiono rientrate o a tendina, e la voce principale riceve in automatico l'icona di apertura.
Personalizzare aspetto e colori
Scegli il carattere e la dimensione del testo con il selettore del carattere e il cursore, con valori distinti per computer e smartphone. Regola poi i colori: il colore del testo, il colore del pulsante (usato per lo sfondo al passaggio del mouse e come tinta della voce attiva, dove conviene impostare il colore del tuo marchio) e il colore di sfondo del menu, con trasparenza per un effetto vetro sulle immagini principali.
Puoi aggiungere un'animazione al passaggio del mouse sulle voci: cambio di colore, dissolvenza, sottolineatura o riempimento progressivo del pulsante. Definisci infine lo spazio interno dei pulsanti, il margine tra le voci e l'arrotondamento degli angoli.
Versione mobile e orientamento
Con Attiva Menu mobile trasformi il menu orizzontale o verticale nella versione dedicata a smartphone e tablet, indispensabile quando le voci o i sottomenu sono molti. Dal pannello dell'orientamento puoi anche passare da menu orizzontale a verticale, e viceversa, mantenendo le stesse voci.
Le specificità di ciascun menu
Menu orizzontale
Per i sottomenu scegli tra lo stile classico, un semplice elenco a tendina che compare al passaggio del mouse, e lo stile personalizzato, con riquadri, titoli, descrizioni e immagini, adatto a cataloghi e servizi strutturati. Puoi inserire dei divisori tra le voci e, se sono molte o i nomi sono lunghi, disporle su più righe con l'opzione A capo.
Menu verticale
Le voci sono disposte in colonna. Puoi allineare il testo dei pulsanti a sinistra, al centro o a destra e posizionare l'intero blocco di voci in alto, al centro o in basso rispetto allo spazio del componente.
Menu hamburger
Il menu hamburger apre un pannello che puoi mostrare a schermo intero oppure come barra laterale a destra o a sinistra, con una transizione di apertura a scelta. L'icona a tre linee può animarsi al clic con diversi stili e puoi rendere più scuro lo sfondo delle sottovoci per evidenziarne la gerarchia.
Aggiungere il pulsante Torna su
Il pulsante Torna su compare fisso nella pagina e, al clic, riporta il visitatore all'inizio in modo fluido, senza ricaricare. È utile nelle pagine lunghe e sui dispositivi mobili.
Scegli l'icona tra quelle disponibili, preferendo una freccia verso l'alto chiara e riconoscibile, e imposta colore e opacità. Tienilo ben visibile con un colore in contrasto con lo sfondo e un'opacità alta, e posizionalo sempre nello stesso punto, lontano da altri elementi fissi come la chat o l'avviso cookie.
Problemi comuni e soluzioni
Una voce non porta alla pagina giusta.
Apri il collegamento della voce, con l'icona a forma di catena o le opzioni Avanzate, e verifica o reimposta la pagina di destinazione.
Il sottomenu non si apre o si posiziona male.
Controlla che la voce principale abbia almeno una sottovoce e, per il menu orizzontale, verifica lo stile scelto e la larghezza. Nel menu hamburger apri il sottomenu con l'icona accanto alla voce, non con il testo.
Le voci non entrano nello spazio disponibile o il menu appare tagliato.
Riduci la dimensione del carattere, lo spazio interno e il margine, oppure allarga il componente trascinando la maniglia. Nel menu orizzontale puoi anche attivare l'opzione A capo.
Dopo aver cambiato animazione i colori non sono corretti.
Alcuni stili al passaggio del mouse invertono testo e sfondo. Rientra nella sezione dei colori e reimposta il colore del pulsante e il colore del testo: l'animazione riapplicherà i valori giusti.
Il pulsante Torna su non si vede o copre altri elementi.
Aumenta contrasto e opacità e allarga un poco il componente se è poco visibile; spostalo più in alto o di lato se si sovrappone a chat, pulsanti social o avviso cookie. Verifica su computer, tablet e smartphone.
Il menu o il pannello del menu hamburger non compare.
Assicurati che sfondo e opacità non siano completamente trasparenti e che il sito sia stato salvato e ripubblicato dopo le modifiche.