Compatibilità:

WebSite X5 Evo e Pro

Il menu di navigazione ha un ruolo fondamentale per un sito web: tra le altre cose, definisce la struttura del sito stesso, gestisce la navigazione dei visitatori tra le varie pagine del sito e facilita l'indicizzazione dei contenuti da parte dei motori di ricerca. È dunque di fondamentale importanza per il successo del tuo sito che tu riesca a costruire un menu logico, semplice ed efficace.


I passi fondamentali per creare un menu sono essenzialmente 2:

  • Vai al Passo 3 - Mappa e crea la mappa del tuo sito inserendo e nominando opportunamente tutti i livelli e le pagine che ti occorrono (vedi, Come si crea la mappa del sito?).
  • Utilizza l'Oggetto Menu per inserire un menu all'interno dell'Header o della Barra laterale del template o direttamente all'interno delle pagine. 


#tip - Considera che l'Oggetto Menu attinge le voci di cui si compone direttamente dalla Mappa. Per questo è importante sia strutturare correttamente la mappa che scegliere con cura il nome di pagine e livelli. Modificando la Mappa, verrà automaticamente aggiornato anche il menu.  


L'Oggetto Menu permette di impostare e definire le impostazioni grafiche di:

 

Il Menu principale

Il menu principale è quello che propone i link alle pagine più importanti del sito, nella maggior parte dei casi le pagine di offerta. In genere, il menu principale si sviluppa orizzontalmente e viene proposto nell'Header del template o, comunque, nella parte alta e immediatamente visibile delle pagine. In alternativa, il menu principale può svilupparsi verticalmente: in questi casi viene proposto in una colonna apposita sulla parte sinistra della pagina.  


Per impostare il menu principale con sviluppo orizzontale all'interno dell'Header del sito procedi in questo modo:

  • Vai al Passo 2 - Impostazioni del Modello >  Contenuto del Modello > Header.
  • Dalla lista degli Oggetti disponibili, seleziona l'Oggetto Menu e trascinalo sull'area di lavoro: agisci sulle ancore di selezione per posizionarlo e dimensionarlo adeguatamente.
  • Fai doppio click sull'Oggetto Menu inserito in modo da accedere alla finestra delle impostazioni: tutte le opzioni che ti occorrono ora sono raccolte nella sezione Principale.
  • Seleziona il livello del menu che deve essere usato per comporre il menu: clicca sul pulsante  per visualizzare la mappa del sito, seleziona in livello che ti interessa e conferma. Dal momento che stai creando in menu principale, molto probabilmente dovrai selezionare la voce "Menu".  
  • Utilizza le altre opzioni disponibili per definire le impostazioni grafiche del menu: puoi agire su dimensioni, testi e stili dei pulsanti nei diversi stati che possono avere.


Per creare un menu principale con sviluppo verticale ti conviene, invece, fare così:

  • Al al Passo 2 - Impostazioni del Modello >  Struttura del Modello scegli la struttura Header, Footer e Barra laterale a sinistra.
  • Vai al Passo 2 - Impostazioni del Modello >  Contenuto del Modello > Barra laterale.
  • Inserisci l'Oggetto Menu e segui i passi visti prima per configurarlo.  


#tip - Usabilità. Per una buona User Experience è fondamentale che il menu principale sia presente in tutte le pagine e posizionato sempre nello stesso punto: per questo, nell'esempio lo abbiamo inserito direttamente nell'Header o nella Barra laterale del template. Puoi decidere di inserire il menu principale anche come contenuto della pagina: in questo caso, ricordati di replicarlo in tutte le pagine del tuo sito. 


Il Menu di livello  

I menu di livello sono quelli che vengono visualizzati quando un utente passa con il mouse su una voce del menu principale.  Generalmente viene visualizzata una tendina che propone dei link a pagine di approfondimento.


Puoi definire le impostazioni dei menu di livello in questo modo:

  • Fai doppio click sull'Oggetto Menu inserito in modo da accedere alla finestra delle impostazioni e accedi alla sezione Menu di Livello.
  • Scegli se preferisci che tutte le voci siano disposte in un'unica colonna, una di seguito all'altra, o che siano disposte su più colonne affiancate. In questo secondo caso, ricorda che viene automaticamente creata una nuova colonna quando:
    • il numero di voci raggiunge o supera il valore che imposti tramite l'opzione Max Voci per Colonna;
    • l'elenco delle pagine è interrotto da un Separatore (inserito direttamente nella Mappa).
  • Utilizza le altre opzioni disponibili per definire le impostazioni grafiche del menu.


L'Hamburger Menu

Quando lo spazio a disposizione non è sufficiente per permettere la visualizzazione di tutte le voci, il menu viene automaticamente sostituito con l'Hamburger Button. Questo accade anche nel caso non sia stata attivata la creazione di un sito responsive.


L'Hamburger Button ha forma quadrata e la sua altezza e il suo stile sono definiti attraverso le opzioni della sezione Principale della finestra Oggetto Menu. Cliccando sull'Hamburger Button viene visualizzato l'Hamburger Menu, ovvero un menu a comparsa che mostra le voci di primo livello. Puoi definire le impostazioni grafiche dell'Hamburger menu attraverso le opzioni disponibili nella sezione Hamburger Menu della finestra Oggetto Menu.


Se lo preferisci puoi fare in modo che, a prescindere dallo spazio disponibile per il menu, venga sempre utilizzato l'Hamburger Button:

  • Accedi alla sezione Principale della finestra Oggetto Menu.
  • Attiva l'opzione Visualizza sempre l'Hamburger Button.