In this tutorial, we’ll go through how to build an off-canvas menu that can contain a number of different elements and can be styled to taste. We’ll be using three ZionExtras components.. the off-canvas, the slide menu and the burger trigger.
The idea of having different parts of the menu as individual components is to allow for maximum flexibility in how we put it together, but also to allow the components to be used separately for other things.
Let’s go through the workflow of the quickest way to set up an off-canvas menu with an animated burger trigger to open it…
Adding your Trigger to the Header
Note that any element can be used as a clickable trigger to open the off-canvas. The burger trigger comes with some convenient burger animations already out of the box that works great as showing an open/closed state when clicked.
Simply add the burger trigger to the page by finding it inside the ‘add elements’ popup and then choosing the animation you prefer.
Adding your Offcanvas & Content
It’s generally a good idea to add any hidden fixed elements such as an off-canvas outside of any containers and towards the bottom of your template.
Once the off-canvas is added to the page, you can immediately add elements inside that make up the contents of your off-canvas. If the contents are larger than the viewport height then the off-canvas will becomes scrollable.
Next, we need to add an Open/Close click selector. By default, this is ‘.x-burger-trigger’ which is the default class given to the burger trigger. If we’re only using burger triggers for this off-canvas, it can be left as the default. Change to a new class name if deciding to add multiple off-canvas’ and don’t want to use the same triggers.
After changing the Open/Close click selector in the settings, make sure to give your trigger(s) this class.
Adding your Slide Menu in the Offcanvas
The slide menu has two main purposes, to be used inside an off-canvas or to be used a slide down mobile menu inside a header. As we’re using it inside an off-canvas, we want to make sure that the initial state is set to ‘open’.
Next, be sure to set a width. This can be set to 100% so it takes up the width of the container it’s inside of. Each part of the slide menu can be styled from inside the styling tab.
Adding a Close
You may want to add a new burger trigger inside the off-canvas also as a close button. This may not be needed if you’re allowing the backdrop to be clicked to close. If you choose to do so, be sure to enable ‘sync burger triggers’ from the off-canvas settings. This will make sure that the animations are synced so that when you click one burger trigger, the other one will open/close is sync.
That’s it
The setup is pretty straightforward but allows quite a lot of room for creativity and flexibility as you can add any elements and style however you like.
