jQuery Plugin To Create App Style Off-canvas Panels - panels.js

File Size: 14 KB
Views Total: 1384
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Create App Style Off-canvas Panels  - panels.js

panels.js is a lightweight jQuery based off-canvas library for implementing mobile app style off-canvas panels, sidebars, push menus and page elements into your web page.


  • Allows to reveal an off-canvas space from any side of your screen.
  • Pushes the main content to the other side when toggled.
  • Reveals a large off-canvas element covering the original page.

Basic usage:

1. Load the required files in the webpage which has jQuery library installed.

<link href="panels.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="panels.js"></script>

2. Create an off-canvas menu that slides down from the top of the webpage.

<div class="panel top slide"> 
  <!-- panel content --> 

3. Create a toggle button to open the top off-canvas menu.

<button class="top-panel-trigger">Close Panel</button>

Change log:


  • v0.2.0

This awesome jQuery plugin is developed by quoid. For more Advanced Usages, please check the demo page or visit the official website.