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.

Live Demo: https://oxygen.wpdemos.net/slideout/

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.

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 CSS area, paste

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

.slideout-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 256px;
    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;
}

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.

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

jQuery('#%%ELEMENT_ID%%').off('click');
jQuery('#%%ELEMENT_ID%%').click(function (e) {
    e.preventDefault();
    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

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: