In diesem Tutorial werden wir sehen, wie man ein Off-Canvas-Menü mit Framework360 erstellt, also ein Menü, das von links nach rechts oder von rechts nach links geöffnet wird. Innerhalb des Off-Canvas-Menüs können wir jede Art von Inhalt einfügen, wie zum Beispiel ein Navigationsmenü oder einen Warenkorb für unsere E-Commerce-Website.
Schritt 1: Gehen wir in den Bildschirm “Pop-up”
Zuerst müssen wir auf den Punkt "Website" in der linken Seitenleiste zugreifen und dann den Punkt "Pop-up" auswählen.
Schritt 2: Erstellen wir das Off-Canvas-Menü
Sobald wir im Bildschirm "Pop-up" sind, müssen wir die Schaltfläche "Hinzufügen" oben rechts klicken und dann unser Off-Canvas-Pop-up erstellen.
In diesem Tutorial werden wir sehen, wie man ein Off-Canvas-Pop-up erstellt, in dem das Navigationsmenü vorhanden sein wird. Der Bildschirm zur Erstellung des Off-Canvas-Pop-ups ist in verschiedene Tabs unterteilt; lassen Sie uns nun sehen, was wir mit jedem von ihnen tun können.
Tab “Inhalt”
Im Tab "Inhalt" fügen wir zunächst den Titel unseres Off-Canvas-Menüs im entsprechenden Feld "Titel" ein. Neben dem Feld "Titel" ermöglicht uns Framework360 über die Option "Automatisch anzeigen", zu entscheiden, ob das Pop-up automatisch angezeigt werden soll oder nicht, wenn bestimmte Bedingungen erfüllt sind, die wir später in den Tabs "Bedingungen" und "Verhalten" definieren werden.
Achtung: Die Tabs "Bedingungen" und “Verhalten” sind nur sichtbar und bearbeitbar, wenn wir uns entscheiden, die Option “Automatisch anzeigen” zu aktivieren. In diesem Tutorial werden wir der Vollständigkeit halber sehen, was wir innerhalb dieser beiden Tabs tun können, aber in unserem Fall, da es sich um die Erstellung eines Off-Canvas-Pop-ups handelt, in dem das Navigationsmenü vorhanden ist, sollten wir die Option “Automatisch anzeigen” nicht aktivieren, da der Benutzer darauf klicken muss, falls er innerhalb der Seiten der Website navigieren möchte.
Wenn wir weiter im Tab scrollen, finden wir den Punkt "Inhalt", der uns die Möglichkeit gibt, unser Navigationsmenü zum Off-Canvas-Pop-up hinzuzufügen, das wir erstellen. Um dies zu tun, müssen wir auf "Hinzufügen" klicken, um den Visual Builder zu öffnen, in dem wir den Inhalt Navbar hinzufügen werden. Nachdem wir nach dem Navbar-Inhalt im Suchfeld auf der linken Seite unseres Visual Builders gesucht haben, müssen wir ihn in den rechten Bereich ziehen, um ihn innerhalb unseres Pop-ups sichtbar zu machen, wie in der nächsten Abbildung gezeigt. 
Zu diesem Zeitpunkt öffnet sich der Anpassungsbildschirm unserer Navbar, wo wir entscheiden können, welches Menü wir einfügen möchten. Wir werden das Hauptmenü auswählen.
Sobald das Hauptmenü ausgewählt ist, haben wir die Möglichkeit, alle Einstellungen zu definieren, die es haben soll, wie zum Beispiel, ob es vertikal oder horizontal angezeigt werden soll. Wir werden es auf vertikal einstellen. Um das Menü vertikal einzustellen, gehen wir zum linken Abschnitt des Visual Builders unter dem Punkt “Aussehen”, wie in der nächsten Abbildung gezeigt:
Tab “Bedingungen”
An dieser Stelle können wir uns im Tab “Bedingungen” bewegen. Wir möchten erneut betonen, dass dieser Tab nur angezeigt wird, wenn wir im Tab “Inhalt” entschieden haben, das Pop-up, das wir erstellen, automatisch anzuzeigen.
Sobald wir im Tab “Bedingungen” sind, entscheiden wir, wer das Pop-up automatisch sehen soll.
Tab “Verhalten”
Auch der Tab “Verhalten”, wie wir es beim Tab “Bedingungen” gesehen haben, wird uns nur angezeigt, wenn wir im Tab “Inhalt” entschieden haben, das Pop-up automatisch anzuzeigen.
Tab “Aussehen”
Im Tab “Aussehen”, wie der Name schon sagt, werden wir das Aussehen definieren, das unser Pop-up off-canvas haben soll.
Innerhalb des Punktes “Typologie” definieren wir, ob das Pop-up von links nach rechts oder von rechts nach links geöffnet werden soll, indem wir jeweils die Option “Offcanvas – Links” oder “Offcanvas – Rechts” auswählen.
Außerdem können wir innerhalb des zu analysierenden Tabs alle anderen ästhetischen Merkmale unseres Pop-ups definieren, wie die maximale Breite oder die Hintergrundfarbe.
Schritt 3: Erstellen wir das Burger-Menü
Wenn wir ein Off-Canvas-Pop-up erstellen möchten, in dem unser Navigationsmenü vorhanden ist, müssen wir die Punkte des Menüs aus dem Header der Website entfernen und an deren Stelle das klassische Burger-Menü-Symbol einfügen. Dieses Symbol öffnet, wenn es angeklickt wird, unser Off-Canvas-Pop-up mit dem Hauptmenü darin. Um dies zu tun, müssen wir zum Punkt “Globale Blöcke” in der Sidebar gehen. Sobald wir dort sind, klicken wir auf “ Header” um es bearbeiten zu können.
An diesem Punkt wird Framework360 uns den Bildschirm des Visual Builders zur Bearbeitung des Headers öffnen. Hier werden wir das Menü entfernen und den Block "Ikone" hinzufügen, indem wir ihn in die obere rechte Zeile ziehen, wie in der folgenden Abbildung gezeigt.
Danach gehen wir zum Punkt "Icon auswählen", der im linken Bereich des Visual Builders im Tab "Allgemein" zu finden ist, und wählen das Icon der Navbar aus.
Anschließend navigieren wir zu dem Punkt “Klick-Ereignis”, der ebenfalls im linken Bereich des Visual Builders im Tab “Allgemein” zu finden ist, und wählen “Popup öffnen”, wie in der Abbildung gezeigt:
Framework360, einmal definiert als Ereignis beim Klicken das Öffnen des Pop-ups, wird uns fragen, welches Pop-up wir öffnen möchten. Wir werden unser Off-Canvas-Menü auswählen, das wir im vorherigen Schritt erstellt haben.
So werden wir nach dem Neuladen der Webseite sehen, dass sich unser Menü in ein Burger-Menü verwandelt hat, das, wenn man darauf klickt, ein Off-Canvas-Menü mit unseren Inhalten öffnet.
