Slideout.js in Genesis

January 12, 2020 by Sridhar Katakam 3 Comments Favorited: 5 times

This members-only tutorial provides the steps to implement Slideout.js, a touch slideout navigation menu JavaScript in Genesis Sample.

We shall show the widgets placed in a custom widget area in the side panel when the hamburger icon is clicked/tapped - effective 959px and below.

The side panel can be dismissed by clicking/tapping the close icon or clicking anywhere on the content area.

While the tutorial has been written for Genesis Sample, it should work with some adjustments in any Genesis theme. Tested in Genesis Sample 3.2.0.

Step 1

Create a directory called js in the child theme directory and upload slideout.min.js under it.

Create a file named say, slideout-init.js in the same location having the following:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

[…] on January 12, 2020: Follow the updated tutorial here […]

Thanks for this! Is there a way to prevent the menu from opening when the user pulls the left of the screen (ie. only allow it to open on click)? I can’t seem to troubleshoot this and it’s causing issues when scrolling a site.

Try this.

In slideout-init.js

change

// initialize Slideout.
var slideout = new Slideout({
    'panel': $('.site-container').get(0),
    'menu': $('.side-menu').get(0),
    'padding': 256, // width of the slideout menu
    // 'side': 'right' // open the menu from right
});

// initialize Slideout.
var slideout = new Slideout({
    'panel': $('.site-container').get(0),
    'menu': $('.side-menu').get(0),
    'padding': 256, // width of the slideout menu
    // 'side': 'right', // open the menu from right
    'touch': false,
});

Reference: https://github.com/mango/slideout#slideoutoptions

Slideout.js in Genesis

Step 1

Recent Comments

Subscribe to Blog via Email

Categories

Recent Posts

Step 1

Recent Comments

Subscribe to Blog via Email

Categories

Tags

Recent Posts