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. |
| ▪ | Allineamento: 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'Elemento 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. |
