Oggetto Menu

Com'è facile immaginare, attraverso l'Oggetto Menu è possibile inserire nel Sito il Menu di navigazione.

L'Oggetto Menu può essere inserito o direttamente nel Template del Sito, lavorando con l'editor della finestra Contenuto del Modello, o all'interno di una Pagina, al Passo 4 - Creazione della Pagina.

I Menu vengono creati e aggiornati in automatico dal Programma in base alla Mappa del Sito disegnata al Passo 3 - Mappa. Si distingue tra:

Principale: è quello che presenta le voci di primo Livello della Mappa che vanno a comporre la navigazione fissa del Sito.

Menu di Livello: sono quelli che vengono visualizzati al passaggio del mouse su una voce di Livello del Menu Principale.

Ham burger Menu: è quello che viene visualizzato cliccando sull'Hamburger Button. L'Hamburger Button viene utilizzato al posto del Menu quando lo spazio a disposizione non è sufficiente per poterlo mostrare.

Di conseguenza, i comandi necessari per definire le proprietà grafiche del Menu sono articolati nelle seguenti sezioni:

Principale Menu di Livello Hamburger Menu

7.3.1 Sezione Principale

Attraverso i comandi di questa sezione si definiscono alcune impostazioni generali del Menu Principale.

Per prima cosa occorre specificare quale Livello deve essere usato per creare il Menu: è sufficiente richiamare la Mappa del Sito e selezionare il Livello desiderato: le voci incluse saranno impiegate come voci del menu. Fatto questo le opzioni disponibili nel riquadro Visualizzazione sulle quali lavorare sono:

Allineam ento m enu principale / Allineam ento Ham burger Button: definiscono rispettivamente l'allineamento del Menu e dell'Hamburger Button a Sinistra, al Centro o a Destra rispetto allo spazio disponibile per l'Oggetto Menu. Se l'Oggetto Menu è stato inserito nell'editor del Modello, lo spazio disponibile dipende dalle dimensioni con le quali l'Oggetto stesso è stato disegnato. Se, invece, l'Oggetto Menu è stato inserito all'interno di una Pagina, lo spazio disponibile è determinato dalle dimensioni della Cella della Griglia di impaginazione che lo contiene.

In genere, 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 (in Risoluzioni e Responsive Design). È dunque possibile utilizzare l'Hamburger Button come soluzione alternativa al tradizionale Menu di navigazione anche in Siti Desktop.

Visualizza sem pre l'Ham burger Button: fa in modo che al posto del Menu di navigazione principale venga sempre proposto l'Hamburger Button, a prescindere dal fatto che lo spazio a disposizione sia sufficiente o meno per la visualizzazione estesa di tutte le voci.

Le opzioni disponibili nel riquadro Stile pulsante sono:

Larghezza: imposta il valore in pixel della larghezza dei Pulsanti contenenti le voci di Menu.

Margine: imposta il valore in pixel del margine orizzontale e del margine verticale, ovvero dello spazio presente tra il bordo del Pulsante e il testo contenuto.

Distanza: imposta il valore in pixel del margine esterno, ovvero dello spazio presente tra un Pulsante e l'altro.

La larghezza dei Pulsanti deve essere definita anche in considerazione dello spazio complessivamente disponibile per il Menu: tale parametro può essere liberamente modificato nel caso non si utilizzi un Modello grafico predefinito (vedere, Struttura del Modello).

Bordo: definisce, anche singolarmente, lo spessore dei bordi e il fattore di smusso degli angoli dei Pulsanti.

Le opzioni presenti nel riquadro Testo pulsante sono:

Tipo di Font: specifica il Tipo di carattere, le dimensioni e lo Stile del testo.

Allineam ento: definisce l'allineamento del testo a Sinistra, al Centro o a Destra rispetto al Pulsante.

È poi possibile definire l'aspetto dei singoli elementi che compongono il Menu Principale. Per prima cosa occorre selzionare l'Elem ento del Menu sul quale si vuole agire: Sfondo, Voce del Menu, Voce su Passaggio del mouse, Voce per Pagina corrente, Separatore, Hamburger Button.

A seconda dell'elemento selezionato, nella sezione Stile possono essere disponibili le seguenti opzioni:

Colore Sfondo / Colore Testo: definiscono il colore per lo Sfondo, per i testi delle Voci nei diversi stati, per il Separatore del Menu e per l'Hamburger Button.

Opacità: imposta il grado di opacità del colore applicato per lo Sfondo. Per valori tendenti allo 0 diminuisce l'opacità e lo sfondo dell'Oggetto diventa più trasparente lasciando vedere lo sfondo della Pagina.

Bordo: definisce, anche singolarmente, il colore, lo spessore e il fattore di smusso degli angoli per i bordi dello Sfondo. Per le Voci del Menu nei diversi stati, invece, è possibile impostare solo il colore del bordo: spessore e fattore di smusso vengono ripresi da quanto definito nel riquadro Stile pulsante.

Margine: imposta il valore in pixel dei margine orizzontale e verticale esterno ai Pulsanti. Di fatto, il margine impostato determina le dimensioni dello Sfondo del Menu.

Im m agine Sfondo: definisce l'Immagine che deve essere visualizzata come sfondo del Pulsante. Per selezionare l'Immagine da utilizzare è sufficiente cliccare sul pulsante per sfogliare le risorse disponibili: possono essere utilizzati file in formato .JPG, .GIF, .PNG. In alternativa è possibile cliccare sulla freccia a lato del campo per aprire la libreria dei pulsanti e selezionare l'Immagine da utilizzare.

Usa le stesse im postazioni dello stato su Passaggio del m ouse / Usa le stesse im postazioni dello stato Voce del Menu: disponibili rispettivamente per gli elementi Voce per Pagina corrente e Hamburger Button, fanno in modo che vengano utilizzate le stesse opzioni definite per la Voce su Passaggio del mouse o per la Voce del Menu; in caso contrario i due elementi possono avere impostazioni diverse.

Effetto: disponibile solo per l'Elemento Voce su Passaggio del mouse, definisce l'effetto con cui viene animato il Pulsante al passaggio del mouse.

Testo pulsante: applica alla Voce di Menu selezionata o al Separatore lo stile del testo Normale, Grassetto, Corsivo o Sottolineato. Questo stile si aggiunge a quanto già definito nel riquadro Testo pulsante.

7.3.2 Sezione Menu di Livello

Attraverso i comandi di questa sezione si definiscono alcune impostazioni generali del Menu di Livello.

Innanzi tutto occorre definire il Tipo di Menu che si vuole realizzare scegliendo tra:

Disposizione su una colonna: tutte le voci del Menu di Livello vengono organizzate in un'unica colonna, una di seguito all'altra.

Disposizione su più colonne: le voci del Menu di Livello vengono organizzate in più colonne affiancate. Viene automaticamente creata una nuova colonna quando:

il numero di voci raggiunge o supera il valore impostato per l'opzione Max Voci per Colonna;

l'elenco delle Pagine è interrotto da un Separatore (vedere, Creazione della Mappa).

Oltre al Tipo di Menu, il riquadro Visualizzazione presenta anche le seguenti voci:

Max Voci per Colonna: attivo solo per il Tipo di Menu Disposizione su più colonne, imposta il numero massimo di voci che possono essere contenute in ciascuna colonna del Menu a Comparsa.

Apertura: specifica da che parte, rispetto al Menu Principale, deve essere visualizzato il Menu di Livello.

Effetto: definisce l'effetto di visualizzazione per il Menu di Livello.

Scelto il Tipo di Menu, è possibile definire le opzioni proposte nel riquadro Stile pulsante:

Larghezza: imposta il valore in pixel della larghezza dei Pulsanti contenenti le voci di Menu.

Margine: imposta il valore in pixel del margine orizzontale e del margine verticale, ovvero dello spazio presente tra il bordo del Pulsante e il testo contenuto.

Distanza: imposta il valore in pixel del margine esterno, ovvero dello spazio presente tra un Pulsante e l'altro.

La larghezza dei Pulsanti deve essere definita anche in considerazione dello spazio complessivamente disponibile per il Menu: tale parametro può essere liberamente modificato nel caso non si utilizzi un Modello grafico predefinito (vedere, Struttura del Modello).

Le opzioni presenti nel riquadro Testo pulsante sono:

Tipo di Font: specifica il Tipo di carattere, le dimensioni e lo Stile del testo.

Allineam ento: definisce l'allineamento del testo a Sinistra, al Centro o a Destra rispetto al Pulsante.

È poi possibile definire l'aspetto dei singoli elementi che compongono il Menu di Livello. Per prima cosa occorre selezionare l'Elem ento del Menu sul quale si vuole agire: Sfondo, Voce del Menu, Voce su Passaggio del mouse, Voce per Pagina corrente, Separatore e Linea di separazione.

A seconda dell'elemento selezionato, nella sezione Stile possono essere disponibili le seguenti opzioni:

Colore Sfondo / Colore Testo: definiscono il colore per lo Sfondo, per i testi delle Voci nei diversi stati, per il Separatore del Menu e per l'elemento Linea di separazione.

Opacità: imposta il grado di opacità del colore applicato per lo Sfondo. Per valori tendenti allo 0 diminuisce l'opacità e lo sfondo dell'Oggetto diventa più trasparente lasciando vedere lo sfondo della Pagina.

Bordo: definisce, anche singolarmente, il colore, lo spessore, il fattore di smusso degli angoli e l'ombra per i bordi dello Sfondo.

Testo pulsante: applica alla Voce su Passaggio del mouse o al Separatore lo stile del testo Normale, Grassetto, Corsivo o Sottolineato. Questo stile si aggiunge a quanto già definito nel riquadro Testo pulsante.

Im m agine Sfondo: disponibile solo per gli Elementi Voce del Menu, Voce su Passaggio del mouse e Separatore, definisce l'Immagine che deve essere visualizzata come sfondo del Pulsante. Per selezionare l'Immagine da utilizzare è sufficiente cliccare sul pulsante per sfogliare le risorse disponibili: possono essere utilizzati file in formato .JPG, .GIF, .PNG. In alternativa è possibile cliccare sulla freccia a lato del campo per aprire la libreria dei pulsanti e selezionare l'Immagine da utilizzare.

Usa le stesse im postazioni dello stato su Passaggio del m ouse: disponibile solo per l'elemento Voce per Pagina corrente, fa in modo che vengano utilizzate le stesse opzioni definite per la Voce su Passaggio del mouse; in caso contrario i due stati possono avere impostazioni diverse.

Larghezza: disponibile solo per l'Elemento Linea di separazione, imposta la larghezza in percentuale rispetto alla larghezza del Menu a Comparsa.

Stile: disponibile solo per l'Elemento Linea di separazione, imposta il tipo di tratto scegliendo tra Pieno, Tratteggiato, Punti, Bassorilievo, Altorilievo.

7.3.3 Sezione 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 (in Risoluzioni e Responsive Design).

Se l'Oggetto Menu è stato inserito nell'editor del Modello, lo spazio disponibile dipende dalle dimensioni con le quali l'Oggetto stesso è stato disegnato. Se, invece, l'Oggetto Menu è stato inserito all'interno di una Pagina, lo spazio disponibile è determinato dalle dimensioni della Cella della Griglia di impaginazione che lo contiene.

È possibile fare in modo che, a prescindere dallo spazio disponibile per il Menu, venga sempre utilizzato l'Hamburger Button attivando l'opzione Visualizza sempre l'Hamburger Button presente nella sezione Principale.

L'Hamburger Button ha forma quadrata e la sua altezza e il suo stile sono definiti attraverso le opzioni della sezione Principale.

Cliccando sull'Hamburger Button viene visualizzato l'Hamburger Menu, ovvero un menu a comparsa che mostra le voci di primo livello.

Per definire lo stile dell'Hamburger Menu è possibile, per prima cosa, utilizzare le opzioni disponibili nel riquadro Visualizzazione:

Apertura: specifica se quando si clicca sull'Hamburger Button il Menu deve aprirsi verso Destra o verso Sinistra.

Effetto: definisce con che effetto deve essere visualizzato l'Hamburger Menu.

Durata: definisce la velocità con la quale compare il Menu quando si clicca sull'Hamburger Button.

Dato che l'Hamburger Menu viene visualizzato sovrapposto alla Pagina, è possibile definire alcune opzioni per lo Stile Overlay Contenuti:

Colore Sfondo: definisce il colore dello sfondo esterno all'Hamburger Menu, ovvero il colore che viene reso semi-trasparente (in base al valore impostato per l'opzione Opacità) e utilizzato per creare un filtro che oscura la Pagina sottostante.

Opacità: imposta il grado di opacità del colore dello sfondo esterno all'Hamburger Menu. Per valori tendenti allo 0 diminuisce l'opacità e il filtro diventa più trasparente lasciando vedere i contenuti della Pagina.

Le opzioni per definire lo Stile pulsante sono:

Larghezza: imposta il valore in pixel della larghezza dei Pulsanti contenenti le voci di Menu.

Margine: imposta il valore in pixel del margine orizzontale e del margine verticale, ovvero dello spazio presente tra il bordo del Pulsante e il testo contenuto.

Distanza: imposta il valore in pixel del margine esterno, ovvero dello spazio presente tra un Pulsante e l'altro.

La larghezza dei Pulsanti deve essere definita anche in considerazione dello spazio complessivamente disponibile per il Menu: tale parametro può essere liberamente modificato nel caso non si utilizzi un Modello grafico predefinito (vedere, Struttura del Modello).

Le opzioni presenti nel riquadro Testo pulsante sono:

Tipo di Font: specifica il Tipo di carattere, le dimensioni e lo Stile del testo.

Allineam ento: definisce l'allineamento del testo a Sinistra, al Centro o a Destra rispetto al Pulsante.

È poi possibile definire l'aspetto dei singoli elementi che compongono l'Hamburger Menu. Per prima cosa occorre selezionare l'Elem ento del Menu sul quale si vuole agire: Sfondo, Voce del Menu, Voce su Passaggio del mouse, Separatore e Linea di separazione.

A seconda dell'elemento selezionato, nella sezione Stile possono essere disponibili le seguenti opzioni:

Colore Sfondo / Colore Testo: definiscono il colore per lo Sfondo, per i testi delle Voci nei diversi stati, per il Separatore del Menu e per l'elemento Linea di separazione.

Bordo: definisce, anche singolarmente, il colore, lo spessore e l'ombra per i bordi dello Sfondo.

Testo pulsante: applica alla Voce su Passaggio del mouse o al Separatore lo stile del testo Normale, Grassetto, Corsivo o

Sottolineato. Questo stile si aggiunge a quanto già definito nel riquadro Testo pulsante.

Larghezza: disponibile solo per l'Elemento Linea di separazione, imposta la larghezza in percentuale rispetto alla larghezza dell'Hamburger Menu.