In questo tutorial vedremo come creare un menù off-canvas con Framework360, ossia un menu che si apre da sinistra verso destra oppure da destra verso sinistra. All’interno del menù off-canvas possiamo inserire qualsiasi tipo di contenuto, come ad esempio un menu di navigazione o un carrello per il nostro sito web e-commerce.
Step 1: Rechiamoci all’interno della scherma “Pop-up”
Per prima cosa, dobbiamo accedere alla voce "Sito Web" nella barra laterale sinistra e successivamente selezionare la voce "Pop-up".
Step 2: Realizziamo il menù off-canvas
Una volta all’interno della scremata "Pop-up" dovremo cliccare il pulsante "Aggiungi" in alto a destra e poi costruire il nostro pop-up off-canvas.
In questo tutorial vedremo come realizzare un pop-up off-canvas all’interno del quale sarà presente il menù di navigazione. La schermata di creazione del pop-up off-canvas è divisa in diversi tab, andiamo ora a vedere cosa possiamo fare con ognuno di essi.
Tab “Contenuto”
All'interno del tab "Contenuto", per prima cosa, inseriamo il titolo del nostro menù off-canvas all'interno dell'apposita voce "Titolo". Accanto alla voce "Titolo", Framework360 attraverso l'opzione "Mostra automaticamente" ci permette di decidere se il pop-up dovrà essere visualizzato automaticamente o meno al verificarsi di determinate condizioni che andremo a definire successivamente nei tab "Condizioni" e "Comportamento".
Attenzione: I tab "Condizioni" e “Comportamento” saranno visibili e modificabili solo nell’ipotesi in cui decidiamo di attivare l’opzione “Mostra automaticamente”. In questo tutorial per completezza andremo a vedere cosa poter fare all’interno di questi due tab, ma nel nostro caso, trattandosi della creazione di un pop-up off-canvas all’interno del quale è presente il menù di navigazione, non dovremmo attivare l’opzione “Mostra automaticamente”, in quanto dovrà essere l’utente a cliccarci su nell’ipotesi in cui vorrà navigare all’interno delle pagine del sito web.
Continuando a scorrere all'interno del tab, troveremo la voce "Contenuto" che ci darà la possibilità di aggiungere il nostro menù di navigazione al pop-up off-canvas che stiamo realizzando. Per fare ciò, dovremo cliccare su "Aggiungi" per aprire il Visual Builder, all'interno del quale aggiungeremo il contenuto Navbar. Dopo aver cercato il contenuto Navbar all'interno della schermata di ricerca contenuti presente sulla sinistra del nostro Visual Builder, dovremo trascinarlo nella sezione di destra per renderlo visibile all'interno del nostro pop-up, come mostrato nella figura successiva.
A questo punto si aprirà la schermata di personalizzazione della nostra Navbar dove potremo decidere quale menù inserire al suo interno, noi andremo a selezionare il menù principale.
Una volta selezionato il menù principale avremo la possibilità di andare a definire tutte le impostazioni che quest’ultimo dovrà avere, come per esempio se dovrà essere visualizzato in verticale o orizzontale, noi lo imposteremo in verticale. Per impostare il menù in verticale rechiamoci sulla sezione sinistra del Visual Builder alla voce “Aspetto” come mostrato nella figura successiva:
Tab “Condizioni”
A questo punto possiamo spostarci all’interno del tab “Condizioni”, specifichiamo nuovamente che questo tab ci apparirà solamente nel caso in cui all’interno del tab “Contenuto” abbiamo deciso di mostrare automaticamente il pop-up che stiamo realizzando.
Una volta dentro il tab “Condizioni” andiamo a decidere a chi far visualizzare automaticamente il pop-up.
Tab “Comportamento”
Anche il tab “Comportamento”, come abbiamo visto per il tab “Condizioni”, ci apparirà solamente nel caso in cui all’interno del tab “Contenuto” abbiamo deciso di mostrare automaticamente il pop-up.
Tab “Aspetto”
All’interno del tab “Aspetto”, come ci suggerisce il nome, andremo a definire l’aspetto che dovrà avere il nostro pop-up off-canvas.
All’interno della voce “Tipologia” andiamo a definire se il pop-up dovrà si dovrà aprire da sinistra verso destra oppure da destra verso sinistra, selezionando rispettivamente l’opzione “Offcanvas – Sinistra” o “Offcanvas – Destra”.
Inoltre, all’interno del tab in analisi potremo andare a definire tutte le altre caratteristiche estetiche del nostro pop-up, come la larghezza massima o il colore di sfondo.
Step 3: Creiamo il menù burger
Se vogliamo creare un pop-up off-canvas all'interno del quale sarà presente il nostro menù di navigazione, dobbiamo eliminare le voci del menù dall'header del sito e inserire al loro posto l'icona classica del burger menù. Questa icona, se cliccata, ci aprirà il nostro pop-up off-canvas con all'interno il menù principale. Per fare quanto detto dobbiamo andare alla voce “Blocchi Globali” presente all’interno della sidebar. Una volta al suo interno clicchiamo su “Header” per poterlo modificare.
A questo punto, Framework360 ci aprirà la schermata del Visual Builder per la modifica dell'header. Qui, elimineremo il menù e aggiungeremo il blocco "Icona", trascinandolo nella riga in alto a destra, come mostrato nella figura successiva.
Successivamente, alla voce "Seleziona icona", presente nella schermata a sinistra del Visual Builder all'interno del tab "Generale", selezioniamo l'icona della Navbar.
Dopo di ciò, rechiamoci alla voce “Evento al click”, anch’essa presente nella schermata a sinistra del Visual Builder all’interno del tab “Generale”, e selezioniamo “Apri popup”, come mostrato in figura:
Framework360, una volta definito come evento al click l’apertura del pop-up, ci chiederà quale pop-up vogliamo aprire, noi andremo a selezionare il nostro menù off-canvas che abbiamo realizzato allo step precedente.
Così facendo, dopo aver ricaricato la pagina del sito web, vedremo che il nostro menù si trasformerà in un menù burger che, se cliccato, aprirà un menù off-canvas con i nostri contenuti.
