Off-Canvas menu in Oxygen

Updated on May 21, 2021

This tutorial provides the steps to set up an off-canvas menu that can be toggled by clicking on a hamburger icon in Oxygen using Slideout.js.

We can build the side menu in Oxygen with full control of what appears inside and how.

Step 1

Create/edit your template and set up a structure like this:

Side Menu, Side Menu Inner Wrap and Panel are div elements.

Add side-menu class to the Side Menu div and panel class to the Panel div.

While not required, you could set a width of say, 300px to the Menu div to make it look like a sidebar.

Place your desired side menu elements inside the Side Menu Inner Wrap.

Set Side Menu Inner Wrap’s position as relative. You might also want to give this some padding.

Set the Close Icon’s position as absolute and position it 14px from top and right.

If you place a Menu element inside, make sure it is never mobile responsive.

Your site header, page content and footer go inside the Panel div.

Add a hamburger icon linking to # inside your header.

Set display of .side-menu to none.

Step 2

Now that we have the structure in place it’s time to set up the code.

Note: You may see errors like the following in a few places/times during and after following this tutorial. Just ignore them.

a) Install my functionality plugin.

Upload slideout.min.js to assets/js directory of the plugin using a FTP client.

Edit the plugin’s main php file and add

wp_enqueue_script( 'slideout', plugin_dir_url( __FILE__ ) . 'assets/js/slideout.min.js', '', '1.0.0', true );

inside the custom_enqueue_files() function.

This will load the Slideout in the footer of our site.

b) Select the Code Block element.

Comment out the line in the PHP/HTML panel like so:

<?php
    // echo "hello world!";
?>

In the JavaScript area, add

const slideout = new Slideout({
    'panel': jQuery('.panel').get(0),
    'menu': jQuery('.side-menu').get(0),
    'padding': 300,
    'tolerance': 70
});

More configuration options can be found here.

At Manage > Stylesheets, in a new/existing Stylesheet add:

body {
    width: 100%;
    height: 100%;
}

.slideout-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 300px;
    min-height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
    display: none;
}

.slideout-menu-left {
    left: 0;
}

.slideout-menu-right {
    right: 0;
}

.slideout-panel {
    position: relative;
    z-index: 1;
    will-change: transform;
    background-color: #FFF; /* A background-color is required */
    min-height: 100vh;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
    overflow: hidden;
}

.slideout-open .slideout-menu {
    display: flex;
}

c) For the hamburger icon’s link wrapper, add this JS:

jQuery('#%%ELEMENT_ID%%').off('click');
jQuery('#%%ELEMENT_ID%%').click(function (e) {
	e.preventDefault();
	jQuery('.side-menu').show();
	slideout.toggle();
});

d) For the close menu icon’s link wrapper, add this JS:

// Close Slideout when this is clicked/tapped.
jQuery('#%%ELEMENT_ID%%').off('click');
jQuery('#%%ELEMENT_ID%%').click(function (e) {
    e.preventDefault();
    slideout.close();
});

That should be it.

If you want to darken the panel after it slide opens and be able to click anywhere on it to close the slideout, follow these additional steps in the Code Block element:

1) Below

const slideout = new Slideout({
    'panel': jQuery('.panel').get(0),
    'menu': jQuery('.side-menu').get(0),
    'padding': 300,
    'tolerance': 70
});

add

// add an overlay on the open panel to close the side menu on click.
function close( e ) {
    e.preventDefault();
    slideout.close();
}

slideout
    .on( 'beforeopen', function() {
        this.panel.classList.add( 'panel-open' );
    })
    .on( 'open', function() {
        this.panel.addEventListener( 'click', close );
    })
    .on( 'beforeclose', function() {
        this.panel.classList.remove( 'panel-open' );
        this.panel.removeEventListener( 'click', close );
    });

2) In the CSS, add

.panel:before {
    display: block;
    background-color: rgba(0, 0, 0, 0);
    content: "";
    -webkit-transition: background-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
}

.panel-open:before {
    display: block;
    position: absolute;
    z-index: 99;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.1);
}

Reference: https://github.com/Mango/slideout/issues/173#issuecomment-223095425