ScotchPanels.js - jQuery Off Canvas Menus and Panels Plugin

Download   Demo

Demos

Getting Started

• Side Menu – Easy Way


• Side Menu – HTML5 Way


• Side Menu – Dev Way

Mobile Only

• Side Menu Mobile Only – with CSS


• Side Menu Mobile Only – with JS

Horizontal

• Horizontal Fixed Width


• Horizontal Percentage Width

Vertical

• Vertical Min Height

Content Helpers

• HTML


• Iframe


• Iframe with Loader


• Photo


• Video

Event Helpers

• Click


• Hover


• Touch

Styles

• Transitions


• Durations


• Directions

Triggers

• Trigger Example


• Trigger – Close after “X”


• Trigger – With Cookie

CSS Class Helpers

• CSS Helper Classes

Browser Suport

• JavaScript Only


• JavaScript Only with Easing

Multiple Panels at Once

• Multiple Panels


• Multiple Panels – different styles


• Multiple Panels – same container

Advanced (cool things)

• Custom Slider


• Callbacks


• Loading Buttons


• Nested Panels

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. Scotch Panels work from any container so you can put your side navigation on any element you want. It even provides excellent backwards-compatible browser support via a JavaScript fallback. Lastly, there’s over 30 stripped down code samples to get you up and running in no time.

Features

• Uses CSS3 with JavaScript Fallback


• Fully Responsive


• Custom transition styles


• Completely Customizable with tons of optional settings


• Lightweight, easy to use, and only one file


• Cross Browser Support


• Open Source


• Choose either custom HTML, images, iframes, or video panels


• Optionally use HTM5 Data Attributes


• Off Canvas directions from top, Bottom, left, and right


• Works from any container or div


• Extensive Callbacks API


• Click, touch, hover, and keyboard helpers


• CSS Class Helpers

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
<script src="../../../dist/scotchPanels.js"></script>

2. HTML

<div id="scotch-panel">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
<a href="#" class="toggle-panel"><i class="fa fa-bars"></i></a>

3. JAVASCRIPT

$('#scotch-panel').scotchPanel(
	containerSelector: 'body',
	direction: 'right',
	duration: 300,
	transition: 'ease',
	clickSelector: '.toggle-panel',
	distanceX: '70%',
	enableEscapeKey: true
);

ScotchPanels.js - jQuery Off Canvas Menus and Panels Plugin