In this tutorial we’ll walk through the process of building a custom off-canvas element, triggered by an animated burger style toggle button in Oxygen. We’ll be using OxyPowerPack’s Interactivity Engine to set the trigger & toggle classes to change elements when the user clicks.
The main purpose of this tutorial is not so much about the final layout, it’s more to show how to make an event (a click on a specific element) trigger style changes across multiple other elements. In this case, to reveal an off canvas element in an interesting way.
Of course, this was always possible with code in Oxygen, but now it’s a bit simpler, thanks to OxyPowerPack and can be done much more visually and without adding any custom code.
All the elements are animated by just toggling specific classes. Toggling a class means dynamically adding or removing a class. If the class is already found on the element it will be removed, if it’s not found then it will be added.
Adding / removing classes is the key to turning styles on / off for elements, which is a common way to make elements reveal and hide.
The modal element already comes with the ability to set a click as a trigger and can act as an off canvas by adding a slide animation, but it’s not going to work for this for a few reasons;
Like with creating anything manually instead of using a pre-built component – there are more steps, but the benefit is that we get full control and it’s actually really simple and easy to customise.
Apart from initially adding the burger toggle, which requires pasting in some HTML, there is actually no code needed at all.
These are the six steps;
To make things more modular, we can create a brand new template for our main template to inherit. This way our entire site can be contained inside a site wrapper. We just need to ensure our new template is set to catch all and has a higher priority than the main template.
The structure needs to be as follows;
Note – It can be simpler to leave the inner content element out until right at the end, so we’re only focusing on the three elements that we currently care about.
For logged in members, you can get access to the template with the Interactivity Engine settings already set up below..
The burger toggle is the part that requires a bit of html/css, but we’re just pasting it in from the Hamburgers.css site.
Inside the code block the html needed for the burger toggle is this
<button class="hamburger hamburger--slider" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button>
Next we need to add the CSS that comes with the hamburger menu button. The easiest way is to add a new stylesheet inside Oxygen and paste in the hamburger CSS found here.
The burger toggle menu will now be visible inside the code block.
The code block just needs to be fixed positioned into the top right of the viewport. That’s all we need to do with that for now.
The off canvas element is the first div after the code block with the class ‘off-canvas’.
We need to add the basic styles to position it correctly. This is giving it a fixed position to the right side of the viewport from the top to the bottom of the screen (top: 0, right: 0, bottom: 0) and a high enough z-index so it sits above other elements.
It will also need a background colour and a width set, say 400px. and a max-width to make sure it’s responsive. We set the max-width to 85% so it doesn’t quite cover the entire viewport.
We can then add any elements we want inside of the off canvas element and add any other styles we like such as padding to get the spacing we need.
The element will remain fixed in this position until we start adding new classes to hide it later. For now, we’re positioning and styling the element how we want it to look once it has been revealed.
For consistency, we want both the site-wrapper and the off-canvas elements to have the same transition times so they are synchronised when the toggle button is clicked.
In the demo, both these elements have a transition duration of ‘.4s’ and a timing function ‘ease’. We could also to choose to add a delay if we wanted them to be slightly out of sync.
We can now add new classes to both of our elements to add the effect. These are the classes that will be dynamically added when the user click on the burger toggle button. The styles added to these classes will just be for creating the effect, just transforms and opacity.
The off-canvas is currently visible, so we need to add a class that hides it.
Let’s add the class ‘off-canvas__hide’ and add a transform with 100% in the X-axis to completely hide the element off to the right of the viewport.
The site wrapper will also need a new class that creates the wanted effect. In our case, this is to make it fade & appear to recede into the distance.
To keep things easy to remember, let’s add a class ‘site-wrapper__hide’ to add the styles for what we want it to do.
In the demo, we scaled the element using a transform down to 0.9 and also reduced the opacity down to 0.4.
Note – If anymore styles need to be added to the elements that aren’t part of the effect, then the elements must have their original classes selected before applying the styles.
Now all the styles have been added for the effect, the last part is to make sure that clicking the code block (containing our burger toggle) triggers the needed class changes on all the elements, forcing the new styles to kick in.
With OxyPowerPack active and docked at the bottom of the builder. Clicking the code block will reveal the settings to select our action. (if unfamiliar with how events and actions work, see our Interactivity Engine guide)
We’ll choose ‘click’ from the available list of actions, then click the + symbol to add the event actions.
There are three different actions to setup. All are Toggle Class.
With the burger toggle, we’re just adding the ‘is-active’ class to the hamburger (this is a class required to make the hamburger animate)
With the off-canvas, we’re toggling our new class that we set up the transform on.
With the site-wrapper, we’re toggling our new class that we set up the scale and opacity on.
The very last step is just removing the .site-wrapper__hide class from the site-wrapper element using the class drop down. This is because, unlike the off-canvas element, we don’t want the site-wrapper to be in it’s ‘hidden state’ when the page first loads.
This approach is quite flexible for creating any type of effect that involves changing styles when an element is clicked. It’s just a case of thinking about which style needs to be added to create the effect, adding a new class to apply those styles, then toggling that new class on and off with an event, like a click.