Creating animated off canvas menus and hamburger buttons in Oxygen Builder

Hi Digital Buddy! This time I will share a tutorial on how to create a canvas menu that will be activated and deactivated with an animated hamburger button.

In another article, we previously wrote an article about "How to Create an Off-Canvas Menu with Oxygen Builder". The difference in this tutorial is that in this article the canvas menu is made with a Modal element and the hamburger button is not animated, while in this tutorial we are using CSS and javascript with animation on the hamburger button.

The hamburger button we mean is the three line icon usually means a trigger icon to open the menu.

Create animated hamburger buttons

There are 2 common ways to create an animated hamburger button. The first is that we create the lines manually and the second is using the css library.

For this tutorial we will use the CSS library animated hamburgers from Jonathan Suh.

Please go to the "Tasty CSS-animated hamburger" page at https://jonsuh.com/hamburgers/ and choose one of the animations you want, for example in this tutorial example I will choose Elastic.

Add a code block element in the Oxygen Builder, placing it where you want the hamburger button to be, usually in the header.

Add the following code to the HTML tab in the code block element:

<button class="hamburger hamburger--elastic" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

Notice the first line, if you want to replace the Elastic animation type with another animation, please change the hamburger--elastic section to the type of animation you want, for example hamburger--arrow , hamburger--spin and so on. Check out the types of animations provided on the "Tasty CSS-animated hamburger" page.

The hamburger will animate into a different shape if it has a css class is-active. To trigger it, we use jQuery added to the javascript tab code block like this:

var $hamburger = jQuery(".hamburger");
	$hamburger.on("click", function(e) {
		$hamburger.toggleClass("is-active");
		jQuery ('body').toggleClass('menu-appears');
	});

The javascript code above will add and remove is-active css class (such as being a toggle on/off) on elements that have a hamburger class that serves to animate the hamburger button, and will add a "menu-appears" CSS class on the body to bring up the canvas menu ( will be discussed below).

For the CSS, we will take the basic CSS hamburger and the elastic animation section only in order to save and maintain our web performance.

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #000; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }

/*
   * Elastic
   */
.hamburger--elastic .hamburger-inner {
  top: 2px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  .hamburger--elastic .hamburger-inner::before {
    top: 10px;
    transition: opacity 0.125s 0.275s ease; }
  .hamburger--elastic .hamburger-inner::after {
    top: 20px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.hamburger--elastic.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(135deg);
  transition-delay: 0.075s; }
  .hamburger--elastic.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0; }
  .hamburger--elastic.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-270deg);
    transition-delay: 0.075s; }

For other animations, please open the complete CSS here.

Until this stage we have been able to create a hamburger icon which when clicked will animate into a cross shape, and when clicked again will animate into its original shape.

Creating a Canvas Menu

The canvas menu we will create is using the DIV and CSS class canvas-menu .

The initial state of the DIV will be hidden outside the screen (because it is called Off Canvas), and will be shifted to the screen by the CSS class condition "menu-appears" when the hamburger button is pressed because it is triggered by the javascript code that we previously created above.

The trick is to create a DIV and give it a class canvas-menu . Fill it with the elements you need, such as menu links, logos, buttons etc. in the DIV.

Then make the CSS and javascript code as follows:

/*canvasmenu*/
.canvas-menu {
	background:white;
	position:fixed;
	left:0;
	top:0;
	width:300px;
	height:100vh;
	transform:translateX(-100%);
	z-index:99;
	opacity:0;
	overflow-y: hidden;
}

.menu-appears .canvas-menu {
	transform:translateX(0);
	transition: .3s all cubic-bezier(0.65, 0, 0.35, 1);
	opacity:1;
	overflow-y: hidden;
}

Summary

The example above is one way to create an off-canvas menu with Oxygen Builder without any additional plugins.

By using direct code like this we can minimize the use of unnecessary codes ( bloat ) so that we can maximize the performance of our website.

You can also combine and modify according to your needs and creativity, and I'm sure the results will be more interesting for your visitors.

That's one way to create an off canvas menu with animated hamburger buttons.

Do you have any other alternative way? Would you like to share it with others? Or are you having trouble implementing the code above?

Please leave your comments below to share with others.

Happy Digitalyze!