Off-canvas menus are ones that are located outside of a user’s viewport and only slide in when a user activates them. This technique is awesome from the point of view of mobile usability. It is combined with other menu techniques and gives you valuable space for complex responsive navigation. In this post i have put together 16 jQuery off canvas slide menu plugins for you to use and add to your next web design project.

Menufication

Navigation is one of the most important aspects of a website. The fly-out menu has been proven to be the most efficient navigation that dramatically can improve your visitors experience on your website.

scotchPanels.js

scotchPanels.js is a jQuery plugin for easily creating off canvas menus, navigations, and other panel types such as images, videos, and iframes. Scotch Panels are featured-packed and have a ton of different options for every skill-level to tweak and implement into almost any project.

Slidebars

Slidebars is a jQuery framework for quickly and easily implementing app style off-canvas space into your website.

Pushy

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

Puma SideBar

Puma Sidebar is a jQuery touch enabled sidebar. That can be use in your webapps, websites or anywhere you want.

Pull-Out Content Panel

This panel has been created to fit into any website with a clean and professional design. It can be fixed on the left or on the right and can contain any type of content : headings, texts, lists, images, videos, etc. The custom scrollbars packed in this menu will automatically appear when needed and if you need to add even more content, you can use the infinite carousel to scroll between each part of the panel.

FlexMenu

“FlexMenu” is a fully responsive jQuery menu/navigation plugin. It was built with Sass CSS which makes it easy to modify.

Bootstrap Offcanvas

Super simple, easy to use off-canvas navigation menu for Bootstrap.

bigSlide.js

bigSlide is a teeny tiny (~1kb compressed) jQuery plugin for creating off-screen slide panel navigation. It will slide the navigation panel as well as any containers given the .push class (or a class of your choosing in the settings).

Sidr

Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive.

mmenu

A jQuery plugin for creating slick, app look-alike sliding menus for you mobile website with only one line of javascript.

jpanelmenu

jPanelMenu is a clean and modern jQuery menu that helps to create a Paneled-Style Navigation for your web application or website.

jQuery Mobile – Slide Menu

A sliding menu similar to Facebook and Path’s approach to menu design on mobile.

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. It supports two types of unveiling- either by nudging the rest of the page and making room for itself, or overlaying the page (and not displacing its neighbours). CSS3 transitions are used to power the animation, ensuring a smooth visual experience even on low powered mobile devices.

PageSlide

PageSlide a jQuery plugin which slides a webpage over to reveal an additional interaction pane.

Slidepanel

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