Similar to ShiftNav but lighter
Adding the Slideout.js script is easy – it’s available on a CDN so there is no need to install the file on your site and wp_enqueue_script() can just point to the CDN.
The suggested CSS is installed in a ‘wp_head‘ action call and the launch code is added in a ‘wp_footer‘ action.
But it doesn’t yet work.
Move the container
When the panel slides in it moves the site contents over. I changed the launch code to use the .site-container class instead of adding an ID to the same div.
Disable Genesis responsive menu script
This script must be dequeued for Slideout.js to work. As a result, a hamburger menu button must be added manually and the ‘genesis-responsive-menu‘ class added to the menu.
Genesis Sample changes the hook that the primary menu is added to, from ‘genesis_after_header‘ to ‘genesis_header‘, with a priority of 12. I simply add the hamburger menu toggle button with ‘genesis_header‘ and the default priority of 10. I copied the markup that the responsive menu script generated.
By using the same markup the toggle button only appears below the 960px breakpoint. Slideout.js is intended to be active for all screen sizes but I chose to limit to a mobile menu feature.
Add the slide-in block
I used the ‘genesis_before‘ hook to add the slide-in block before the .site-container block so that it doesn’t get moved when the menu toggle is clicked.
I copied the hamburger menu toggle button markup but changed the icon to an X (dashicons-no) to close the slide-in block.
The code then adds the primary menu again. You could change the code to register a new menu location and populate it, or a widget area so as to allow for additional items in the slide-in block.
The default styling of the slide-in block is plain so could use some attention. ShiftNav’s styling looks good right from the start. Such customisation will be unique to your site.
ShiftNav is much easier to work with but Slideout.js might suit you better if you are looking for a lighter script (one that a client cannot mess with).
Sridhar Katakam has published a number of premium tutorials about using Slideout.js and the slide-in blocks look nice.
If the code doesn’t show it slideout.js.php is on gist.