How to Create an Off-Canvas Menu with Oxygen Builder

Hi Digital Buddy! There is a menu design that is currently sometimes used on several websites, both on desktop and mobile devices, namely the off-canvas menu .

In this article, we will create an example tutorial for creating an off-canvas menu using the WordPress CMS and the Oxygen Builder plugin.

Background

The background of writing this tutorial is because there is a member of the Oxygen Builder Facebook Groups who asked about how to make an off-canvas menu the way he wants with a design referring to another website.

Then we tried to make it as an example that Oxygen Builder (without addons) can also be used in creating such a canvas menu even though it is not 100% similar, but the person said that the sample we made was what he wanted and asked how it was made.

Also read: Oxygen Builder, the Best WordPress Page Builder Plugin?

We have personally discussed and provided some brief instructions on how to create a canvas menu, but apart from that we also want to share more details to the public about how to create it through this article because we feel that there is a lot of knowledge that we can learn from the group and it makes we thought about sharing this little knowledge with others.

Overview of the Off-Canvas Menu

The off-canvas menu is a menu design that appears when we click on an element and usually appears with a slide effect because that's considered off-canvas.

The advantage of the off-canvas menu is that we can save space from the existing screen because it only takes 1 small element as a trigger to bring up a larger component and can contain many other elements including menu elements.

Our website also uses an off-canvas menu 😀

Sample Design

Note: The designs we reference are from another website ( minifyme.co.uk ). We use it as an example for the purposes of this tutorial.

For this tutorial, the design that we will reference and have previously created is like the video below:

Notes

There are a number of notes that need your attention in the video tutorials that we made, including:

1. The menu outside the canvas created using elements "Modal"
2. Shear effect on the capital created using effects Slide Right on Animated On Scroll
3. This tutorial is just a simple example to get an idea of ​​the steps to take.
4. The search form is customized with code block elements , we took the idea and part of the code from the video tutorial "How To Make A Search Icon With Animated Field Reveal In Oxygen"

HTML

// empty HTML elements from "Hello World"
<!-- -->

CSS

/* remove border on input search */
#s {border:none;}

/* remove the border when we click input search */
#s:focus {outline:none;}

/* remove the submit button on search (GO button) */
.oxy-search-form input[type="submit"] {display:none;}

/* make the cursor on the search icon a pointer (clickable) */
#searchicon {cursor: pointer;} 

Javascript

// replace the submit button function with an icon that has a searchicon id

jQuery('#searchicon').on('click', function() {

jQuery('#searchsubmit').click();

});

Video Tutorial How To Create Off-Canvas Menu

Conclusion

And that is tutorial on how to create an off-canvas menu with WordPress using the Oxygen Builder plugin.

However, what we have created is just a very simple example that needs to be modified according to your needs, for example, you can add a social media icon, shopping cart, contact form or other elements.

Anyway, from this tutorial we can see that the Oxygen Builder plugin is one of the most flexible builder plugins, without additional plugins or other addons, we can create an off-canvas menu.

We believe that creating this off-canvas menu when coupled with original ideas, creativity, imagination and good design, can be something very interesting and functional for visitors.

What do you think? Is it difficult to manually create an off-canvas menu like this? Maybe you prefer to use off-canvas menu ready plugins or other techniques? Please provide your opinion below.

Happy Digitize Your Life!