Creating animated off canvas menus and hamburger buttons in Oxygen Builder

Tutorial on creating animated menu canvas and hamburger buttons in Oxygen Builder
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Creating animated off canvas menus and hamburger buttons in Oxygen Builder
Table Of Content:
Related Article
iBee-Music-Mockup

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-muncul');
	});

The javascript code above will add and remove the 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-appearing " 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-muncul .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!

Need services to convert your website into WordPress & Oxygen Builder?
Req Estimation

Leave a Reply

Your email address will not be published.

Related Article

How to Set a Website Always Use HTTPS (SSL)
In this article you will read how to set .htaccess so that the website always uses HTTPS (SSL) when opened by visitors.
restore from backup WordPress with WP CLI and SSH
Restore WordPress Backup with WP CLI & SSH
How to restore (restore) our WordPress data with WP CLI & SSH.
Backup Cepat WordPress dengan WP CLI & SSH
Fast WordPress Backup with WP CLI & SSH
How to quickly backup WordPress with 1 WP CLI command and 1 SSH command, create backup script and autobackup script.
COMPLETE PACKAGE OF WEBSITE DESIGN & DEVELOPMENT
Digitalizer offers website design & development services for company profiles, online shops, event organizers, educational institutions or other fields. You don't need to think about domains, web hosting / servers, DNS, email, design, development, security and other technical issues. Just prepare your website content, we do the rest.
All website design & development packages include 1 year maintenance!
Free Consultation
Back to top
cross