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.

Features:

• 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 --> 
<div/>

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

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

Change log:

2015-11-15

• 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.