1. Introduzione all'Hamburger Menu
L’hamburger menu permette di mantenere un design moderno e un’esperienza di navigazione fluida, in particolare per gli utenti che visitano il sito da dispositivi mobile. Grazie a questo componente è possibile organizzare i contenuti in modo ordinato e professionale, migliorando l’usabilità senza rinunciare all’estetica.
2. Inserimento del Componente nell'Area di Lavoro
Per integrare l’Hamburger Menu nel sito, accedere alla barra degli elementi situata sul lato sinistro dell’editor, cliccare sulla categoria Menu e selezionare la voce Hamburger.
Successivamente trascinare il componente nell’area di lavoro tramite drag-and-drop, posizionandolo nel punto desiderato della pagina.
3. Accesso alle Impostazioni di Modifica
Una volta inserito il componente, è possibile personalizzarlo per adattarlo perfettamente all’identità visiva del sito. Per attivare l’interfaccia di editing, selezionare il componente con il tasto sinistro del mouse per visualizzare la barra degli strumenti dedicata e cliccare sul pulsante Modifica hamburger.
4. Configurazione del Layout e delle Animazioni
All’interno della sezione Impostazioni menu è possibile controllare il comportamento e la struttura del componente. Per ottenere un risultato impeccabile, consulta le opzioni riassunte:
- Sfondo: consente di modificare il colore di sfondo e definire con precisione le dimensioni di sfondo
- Transizioni animate: permette di impostare la direzione di scorrimento delle voci del menu (dall’alto, dal basso, da destra o da sinistra)
- Allineamento e spaziatura: consente di definire l’allineamento delle voci e regolare la distanza tra di esse.
5. Personalizzazione estetica: icone e colori
L’aspetto grafico del menu può essere ulteriormente personalizzato utilizzando le icone specifiche presenti nella barra di editing del componente:
- Stile grafico: cliccando sull’icona a forma di stellina è possibile modificare lo stile generale del menu
- Modifica colori: nella sezione Colori si possono personalizzare le tonalità cromatiche applicate all’Hamburger Menu per mantenerlo perfettamente coerente con il design del sito
6. Formattazione e Stile delle Voci di Menù
Per migliorare la leggibilità dei testi e la chiarezza della navigazione, nella sezione Stile voci è possibile:
- Modificare il font, la dimensione e il colore delle voci di menu.
- Definire il colore specifico dalla voce di Menu attivo, in modo da indicare chiaramente la sezione corrente del sito.
- Attivare, se desiderato, un bordo inferiore per evidenziare graficamente la voce selezionata.
7. Gestione Automatica dei Testi
Per semplificare la manutenzione del sito e velocizzare il lavoro di aggiornamento SuperSite mette a disposizione una funzione di automazione. Selezionando l’icona Bandiera nella barra di editing è possibile aggiornare automaticamente i testi della barra del menu, mantenendo la navigazione sempre allineata alla struttura del sito con un semplice clic.
8. Opzioni Avanzate e Sottomenù
Per configurazioni di navigazione più articolate, la sezione Avanzate offre ulteriori strumenti di precisione:
- Icona sottomenu: permette di scegliere l’icona dedicata che segnala chiaramente all’utente la presenza di livelli di navigazione secondari.
- Ottimizzazione della leggibilità: consente di scurire lo sfondo del sottomenù tramite un effetto overlay, migliorando sensibilmente la visibilità delle voci anche su pagine con sfondi complessi o contenuti grafici molto presenti.