Add off-canvas sidebars (Slidebars) containing widgets, menus or other content using the Slidebars jQuery plugin.

Jory Hogeveen

<p>This plugin will add various options to implement off-canvas sidebars in your WordPress theme based on the Slidebars jQuery plugin.</p>
<h4>Overview / Features</h4>
<ul>
<li>Add off-canvas sidebars to the left, right, top and bottom of your website.</li>
<li>Use sidebar areas (widget-ready areas), menu locations or <a href="https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Actions-&-Filters" rel="nofollow ugc">custom hooks</a> to place content into the off-canvas sidebars.</li>
<li>You can add control buttons with a widget, menu item, <a href="https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Shortcodes" rel="nofollow ugc">shortcode</a> or with <a href="https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Theme-setup" rel="nofollow ugc">custom code</a>.</li>
<li>Various customisation options and settings available in the Appearances menu.</li>
<li>Extensive API for <a href="https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/PHP-API" rel="nofollow ugc">PHP</a> and <a href="https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/JavaScript-API" rel="nofollow ugc">JS</a>.</li>
</ul>
<h4>Compatibility (IMPORTANT!)</h4>
<p>The structure of your theme is of great importance for this plugin. Please read the <a href="https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Theme-setup" rel="nofollow ugc">installation guide</a> carefully!!</p>
<p>This plugin should work with most themes and plugins although I can’t be sure for all use-cases. Also note that at this point it’s still a 0.x version…<br />
If the plugin does not work for your theme, please let me know through the support and add a plugins and themes list and I will take a look!</p>
<p><strong>Fixed elements (like sticky menu’s)</strong><br />
There are known issues with fixed elements and Slidebars. <a href="https://www.adchsm.com/slidebars/help/advanced-usage/elements-with-fixed-positions/" rel="nofollow ugc">Click here for more information</a><br />
I’ve created two possible solutions for this:</p>
<ol>
<li>Legacy CSS solution. Use basic CSS2 positioning instead of CSS3 transform with hardware acceleration.</li>
<li>JavaScript solution. It is slower but still allows the use of hardware acceleration for animations.</li>
</ol>
<h4>It’s not working! / I found a bug!</h4>
<p>Please let me know through <a href="https://wordpress.org/support/plugin/off-canvas-sidebars" rel="ugc">support</a> and add a plugins and themes list! 🙂<br />
Or <a href="https://github.com/JoryHogeveen/off-canvas-sidebars/issues" rel="nofollow ugc">submit an issue here on GitHub</a></p>
<h4>Credits</h4>
<ul>
<li>Slidebars jQuery plugin by <a href="https://www.adchsm.com/slidebars/" title="Adam" rel="nofollow ugc">Adam</a>, thank you for this great plugin!</li>
</ul>
<h4>You can find me here:</h4>
<ul>
<li><a href="https://github.com/JoryHogeveen/off-canvas-sidebars/" title="GitHub" rel="nofollow ugc">GitHub</a></li>
<li><a href="http://www.keraweb.nl/" title="Keraweb" rel="nofollow ugc">Keraweb</a></li>
<li><a href="https://nl.linkedin.com/in/joryhogeveen" title="LinkedIn profile" rel="nofollow ugc">LinkedIn</a></li>
</ul>
<h4>Actions | Filters | API</h4>
<ul>
<li><a href="https://github.com/JoryHogeveen/off-canvas-sidebars/wiki" rel="nofollow ugc">See Wiki on GitHub</a></li>
</ul>
<h4>Credits</h4>
<ul>
<li>Slidebars jQuery plugin by <a href="https://www.adchsm.com/slidebars/" title="Adam" rel="nofollow ugc">Adam</a>, thank you for this great plugin!</li>
</ul>
<h4>Ideas?</h4>
<p>Please let me know through the support page!</p>


Alternatives to Off-Canvas Sidebars & Menus (Slidebars)

Top alternatives