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

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • I was unable to make this work – tried 2x – not sure if there is a conflict or what is going on, but couldn’t make it work. I deleted everything but if you do do a full screen slide out as simon suggests, I would love that – and will try again… I’m also having other issues with my site – there is something nasty going on – while in the builder, responsive looks fine – when i’m on my phone its a mess… I think I will have to tear it apart and start over… Fortunately I built a site for a client and it’s great – Thank God! mine isn’t as important at this time. Thank you for what you do – I’ve learned so much from you over the years.

  • HI: I am working on this and came up with a slightly different result, but I am not sure what settings on my side might be wrong. (1) I find that when I click to show the side menu, I have a “gutter” showing, for lack of a better word. It shows between the menu and the actual website. Not sure what is causing this, and (2) I found that my menu is not 100% of the height of the browser window. It is only as high as shown in the Oxygen editor when I created it. Any thoughts? I appreciate any help you can offer, thanks in advance.

    Site URL – http://new.bymasselyn.com/

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