1. Introduzione al Componente Menu Verticale
Il menu verticale è uno strumento di navigazione molto versatile all’interno dell’editor SuperSite. A differenza del classico menu orizzontale, questa soluzione è particolarmente indicata per creare sidebar eleganti o gestire elenchi numerosi di pagine senza appesantire l’intestazione del sito. Utilizzandolo correttamente è possibile migliorare la navigazione e offrire agli utenti un’esperienza più chiara e professionale.
2. Inserimento del Menu nell'Area di Lavoro
Per aggiungere il menu verticale al progetto, accedere alla barra degli elementi posizionata sul lato sinistro della schermata e selezionare la categoria Menu. Successivamente individuare la tipologia Verticale e trascinare il componente nell’area di lavoro tramite drag-and-drop, posizionandolo nel punto desiderato della pagina.
3. Gestione e Personalizzazione delle Pagine
Una volta inserito il menu, è possibile definirne il contenuto selezionando il componente con un clic del mouse e scegliendo il comando Modifica menu dalla barra degli strumenti.
Attraverso la funzione Aggiungi pagina è possibile inserire le diverse voci di navigazione. Il nome assegnato a ogni voce rappresenterà l’etichetta visibile agli utenti (UX) e potrà essere collegato a:
- una pagina del sito
- un indirizzo web esterno
- un componente specifico all’interno di una pagina
- una finestra pop-up
- un file da scaricare o visualizzare
4. Design e Personalizzazione Estetica
L’editor SuperSite consente di personalizzare minuziosamente l’estetica grafica del menu utilizzando le icone presenti nella barra di modifica del componente.
- Colori e sfondi: tramite l’icona Colori è possibile modificare il colore del testo, la tonalità dei pulsanti e lo sfondo del menu per allinearli alla propria identità visiva
- Tipografia: con l’icona Stile menu si può intervenire sul font e sulla dimensione dei testi per migliorarne la leggibilità.
- Animazioni: utilizzando l’icona Stella è possibile applicare effetti di animazione alla barra del menu.
Suggerimento: consigliamo di applicare le animazioni come ultimo tocco, così da potersi concentrare prima sulla struttura e sul layout senza distrazioni visive.
5. Configurazione del Layout e della Spaziatura
Per definire dimensioni e struttura del menu, cliccare l’icona Freccia nella barra degli strumenti del componente. In questa sezione è possibile gestire con precisione:
- Area pulsante, ovvero la dimensione della superficie cliccabile di ogni voce.
- Distanza tra i pulsanti, per regolare lo spazio verticale tra i vari collegamenti e ottenere un layout più ordinato.
6. Impostazioni Avanzate e Rifiniture
La sezione Avanzate consente di perfezionare ulteriormente il menu intervenendo su diversi dettagli:
- Arrotondamento dei bordi, per definire l’aspetto dei pulsanti.
- Allineamento dei testi, per posizionare le scritte a sinistra, al centro o a destra, all'interno delle voci di menu.
- Centramento della barra, per gestire la posizione del menu rispetto alla pagina.
- Orientamento della barra, che permette di modificare rapidamente la direzione del menu, offrendo ulteriore flessibilià.
Al termine della configurazione è consigliabile utilizzare la funzione di anteprima del sito per verificare che spaziature, animazioni e comportamento del menu risultino corretti durante la navigazione.