In this tutorial, we will see how to create an off-canvas menu with Framework360, which is a menu that opens from left to right or from right to left. Inside the off-canvas menu, we can insert any type of content, such as a navigation menu or a shopping cart for our e-commerce website.
Step 1: Let's go inside the "Pop-up" screen
Firstly, we need to access the "Website" item in the left sidebar and then select the "Pop-up" item.
Step 2: Create the off-canvas menu
Once inside the "Pop-up" screen, we will have to click the "Add" button at the top right and then build our off-canvas pop-up.
In this tutorial, we will see how to create an off-canvas pop-up that will contain the navigation menu. The creation screen for the off-canvas pop-up is divided into several tabs; let's now take a look at what we can do with each of them.
Tab "Content"
Within the "Content" tab, first, we insert the title of our off-canvas menu in the designated "Title" field. Next to the "Title" field, Framework360 allows us to decide whether the pop-up should be displayed automatically or not through the "Show Automatically" option based on certain conditions that we will define later in the "Conditions" and "Behavior" tabs.
Attention: The "Conditions" and "Behavior" tabs will be visible and editable only if we choose to activate the "Show Automatically" option. For completeness in this tutorial, we will explore what can be done within these two tabs, but in our case, since it involves creating an off-canvas pop-up containing a navigation menu, we should not activate the "Show Automatically" option, as it should be up to the user to click on it if they wish to navigate within the website pages.
Continuing to scroll within the tab, we will find the "Content" entry which will give us the possibility to add our navigation menu to the off-canvas popup we are creating. To do this, we must click on "Add" to open the Visual Builder, within which we will add the Navbar content. After searching for the Navbar content within the content search screen on the left of our Visual Builder, we must drag it into the right section to make it visible within our pop-up, as shown in the following figure. 
At this point, the customization screen for our Navbar will open where we can decide which menu to insert inside it, we will go on to select the main menu.
Once the main menu is selected, we will have the possibility to define all the settings that it must have, such as whether it should be displayed vertically or horizontally, we will set it up vertically. To set the menu vertically, let's go to the left section of the Visual Builder under the "Appearance" entry as shown in the following figure:
Tab "Conditions"
At this point, we can move inside the "Conditions" tab. Let's specify again that this tab will only appear if, within the "Content" tab, we have decided to automatically show the pop-up we are creating.
Once inside the "Conditions" tab, we will decide who should automatically see the pop-up.
Tab "Behavior"
The "Behavior" tab, as we have seen for the "Conditions" tab, will only appear if within the "Content" tab we have decided to automatically display the pop-up.
Tab "Appearance"
Within the "Appearance" tab, as the name suggests, we will define the look that our off-canvas pop-up should have.
Within the “Typology” entry, we define whether the pop-up should open from left to right or from right to left by selecting the “Offcanvas – Left” or “Offcanvas – Right” option respectively.
Furthermore, within the tab under analysis, we can define all the other aesthetic characteristics of our pop-up, such as maximum width or background color.
Step 3: Create the burger menu
If we want to create an off-canvas pop-up that contains our navigation menu, we need to remove the menu entries from the site's header and replace them with the classic burger menu icon. This icon, when clicked, will open our off-canvas pop-up containing the main menu. To do what has been mentioned, we must go to the “Global Blocks” item inside the sidebar. Once there, click on “
Header” to be able to modify it.
At this point, Framework360 will open the Visual Builder screen for the header modification. Here, we will remove the menu and add the "Icon" block, dragging it into the top right row, as shown in the following figure.
Subsequently, at the "Select icon" entry, found on the left screen of the Visual Builder under the "General" tab, we select the Navbar icon.
After that, let's go to the "Click Event" entry, also present on the left screen of the Visual Builder within the "General" tab, and select "Open popup", as shown in figure:
Framework360, once defined as an event on click for opening a pop-up, will ask us which pop-up we want to open. We will select our off-canvas menu that we created in the previous step.
In doing so, after reloading the web page, we will see that our menu will transform into a burger menu which, if clicked, will open an off-canvas menu with our contents.
