In deze tutorial zullen we zien hoe we een off-canvas menu kunnen maken met Framework360, dat wil zeggen een menu dat van links naar rechts of van rechts naar links opent. Binnen het off-canvas menu kunnen we alle soorten inhoud invoegen, zoals bijvoorbeeld een navigatiemenu of een winkelwagentje voor onze e-commerce website.
Stap 1: Ga naar het scherm “Pop-up”
Als eerste moeten we toegang krijgen tot de optie "Website" in de linker zijbalk en vervolgens de optie "Pop-up" selecteren.
Stap 2: Laten we het off-canvas menu maken
Zodra we ons binnen het scherm "Pop-up" bevinden, moeten we op de knop "Toevoegen" rechtsboven klikken en vervolgens ons off-canvas pop-up bouwen.
In deze tutorial zullen we zien hoe we een off-canvas pop-up kunnen maken waarin het navigatiemenu aanwezig zal zijn. Het scherm voor het maken van de off-canvas pop-up is verdeeld in verschillende tabbladen, laten we nu kijken wat we met elk van hen kunnen doen.
Tabblad “Inhoud”
Binnen het tabblad "Inhoud", laten we eerst de titel van ons off-canvas menu invoeren in het bijbehorende veld "Titel". Naast het veld "Titel" stelt Framework360 ons via de optie "Automatisch weergeven" in staat om te beslissen of de pop-up automatisch moet worden weergegeven of niet, wanneer aan bepaalde voorwaarden wordt voldaan die we later in de tabbladen "Voorwaarden" en "Gedrag" zullen definiëren.
Let op: De tabbladen "Voorwaarden" en “Gedrag” zijn alleen zichtbaar en bewerkbaar als we besluiten om de optie “Automatisch weergeven” te activeren. In deze tutorial zullen we voor de volledigheid bekijken wat we binnen deze twee tabbladen kunnen doen, maar in ons geval, aangezien het gaat om het creëren van een off-canvas pop-up waarin het navigatiemenu aanwezig is, hoeven we de optie “Automatisch weergeven” niet te activeren, omdat de gebruiker erop moet klikken als hij of zij wil navigeren binnen de pagina's van de website.
Wanneer we blijven scrollen binnen het tabblad, zullen we de optie "Inhoud" vinden die ons de mogelijkheid biedt om ons navigatiemenu toe te voegen aan de off-canvas pop-up die we aan het maken zijn. Om dit te doen, moeten we op "Toevoegen" klikken om de Visual Builder te openen, waarin we de Navbar inhoud zullen toevoegen. Nadat we naar de Navbar-inhoud hebben gezocht in het zoekscherm aan de linkerkant van onze Visual Builder, moeten we deze naar het rechtergedeelte slepen om deze zichtbaar te maken in onze pop-up, zoals weergegeven in de volgende afbeelding. 
Op dit punt verschijnt het aanpassingsscherm van onze Navbar waar we kunnen beslissen welk menu we erin willen opnemen, wij zullen het hoofdmenu selecteren.
Zodra we het hoofdmenu hebben geselecteerd, hebben we de mogelijkheid om alle instellingen te definiëren die dit laatste moet hebben, zoals bijvoorbeeld of het verticaal of horizontaal weergegeven moet worden, wij zullen het verticaal instellen. Om het menu verticaal in te stellen gaan we naar de linkerkant van de Visual Builder bij de sectie “Uiterlijk” zoals weergegeven in de volgende afbeelding:
Tab “Voorwaarden”
Op dit punt kunnen we naar de tab “Voorwaarden” gaan, en we specificeren opnieuw dat deze tab alleen verschijnt als we in de tab “Inhoud” hebben besloten om automatisch de pop-up weer te geven die we aan het maken zijn.
Eenmaal in de tab “Voorwaarden” gaan we beslissen wie automatisch de pop-up te zien krijgt.
Tab “Gedrag”
Ook de tab “Gedrag”, zoals we hebben gezien voor de tab “Voorwaarden”, verschijnt alleen als we binnen de tab “Inhoud” hebben besloten om de pop-up automatisch weer te geven.
Tab “Uiterlijk”
Binnen de tab “Uiterlijk”, zoals de naam suggereert, gaan we het uiterlijk definiëren dat onze off-canvas pop-up moet hebben.
Binnen de sectie “Typologie” gaan we definiëren of de pop-up van links naar rechts of van rechts naar links moet openen, door respectievelijk de optie “Offcanvas – Links” of “Offcanvas – Rechts” te selecteren.
Bovendien kunnen we binnen het tabblad in analyse alle andere esthetische kenmerken van onze pop-up definiëren, zoals de maximale breedte of de achtergrondkleur.
Stap 3: Laten we het burger menu maken
Als we een off-canvas pop-up willen creëren waarin ons navigatiemenu aanwezig zal zijn, moeten we de items uit het menu in de header van de site verwijderen en deze vervangen door het klassieke icoon van het burger menu. Dit icoon, wanneer erop geklikt, opent onze off-canvas pop-up met daarin het hoofdmenu. Om dit te doen moeten we naar de sectie “Globale Blokken” gaan die zich in de zijbalk bevindt. Eenmaal daar klikken we op “ Koptekst” om het te kunnen bewerken.
Op dit punt zal Framework360 ons het scherm van de Visual Builder openen voor het bewerken van de header. Hier zullen we het menu verwijderen en de blok "Icoon" toevoegen door het naar de rij rechtsboven te slepen, zoals weergegeven in de volgende afbeelding.
Vervolgens, onder de optie "Selecteer pictogram", aanwezig in het scherm aan de linkerkant van de Visual Builder binnen het tabblad "Algemeen", selecteren we het pictogram van de Navbar.
Daarna gaan we naar de optie “Klik evenement”, die ook aanwezig is in het scherm aan de linkerkant van de Visual Builder binnen het tabblad “Algemeen”, en selecteren we “Popup openen”, zoals weergegeven in de afbeelding:
Framework360, eenmaal gedefinieerd als evenement bij het klikken op de opening van de pop-up, zal ons vragen welke pop-up we willen openen, wij zullen ons off-canvas menu selecteren dat we in de vorige stap hebben gemaakt.
Op deze manier, na het herladen van de website, zullen we zien dat ons menu verandert in een burger menu dat, wanneer erop geklikt, een off-canvas menu met onze inhoud opent.
