11 Free jQuery Navigation Bar Plugins with Off-Canvas Slide Effect

Off-Canvas slide is a unique jQuery effect that was pioneered by Twitter’s blogging platform, Medium. Then came along Ghost CMS and nearly all of its themes contained off-canvas navigation bars.

These days, the effect has gone a step ahead. Now, it is not associated with Medium-like websites. Now, it is being used in all kinds of websites. All thanks to its space-saving, dynamic style.

The works like this, it stays folded up and it is nowhere visible on the whole web page. But when the user clicks a particular button usually identified with three hyphens, even though trend is changing, the menu pushes the whole canvas (web page) away and loads itself.
This kind of menus are extremely handy if you are designing a responsive web design for mobile devices.

Pushing is not necessary however, the menu can slide over the web page, but then it will hide the contents below it.

Free Off-Canvas Navigation Bar Plugins

Nearly all of these plugins contain demos right on the download page so that’s why you won’t find separate demo/download links here.

Panels

Free for personal use, this is a mighty navigation bar plugin that can cater all your needs.

Panels

Contextual Ajax Sliding Panel

A quick and easy way to add a contextual Ajax sliding panel to your site.

Contextual Ajax Sliding Panel

Pushy

Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.

Pushy Navigation Bar

bigSlide.js

It will slide the navigation panel as well as any containers given the .push class (or a class of your choosing in the settings).

Big Slide jQuery Off Canvas Plugin

mmenu

The best jQuery plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.
Recently, tutplus network did a tutorial using mmenu.

mmenu

[rta url=”http://bit.ly/1VQKeEN” text=”Tweet These Tools”]

Responsive Side Toggle Menu

Side Toggle Menu lets you add a side bar menu to your page that slides in from the left or right edge of the browser window.

Side Toggle Menu

[ad1]

Tegan Snyder Mobile Friendly Navigation Bar

This is a hardware accelerated slide menu example. It is modeled after Facebook’s famous menu.

Tegan-Snyder-Mobile-Friendly-Navigation-Bar

jPanel Menu

jPanelMenu is a jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).

jPanel Menu

Sidr

You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too).

jQuery Off Canvas Navigation

Slidebars

Slidebars is a jQuery plugin for quickly and easily implementing app style off-canvas menus and sidebars into your website.

Slidebars

[rta url=”http://bit.ly/1VQKeEN” text=”Tweet These Tools”]

Bootstrap Off Canvas

This website did not provide a live demo, however it did give me an animated GIF.

Off Canvas Menu

That’s all the off-canvas jQuery plugins we had for today. Stay tuned for tomorrow, we got a really unique post lined up for tomorrow.