Skip to content
This repository has been archived by the owner on Aug 23, 2020. It is now read-only.

Latest commit

 

History

History
78 lines (60 loc) · 2.59 KB

README.md

File metadata and controls

78 lines (60 loc) · 2.59 KB
Raw

Panels

Easy off canvas elements

http://quoid.github.io/panels/index.html

Dependencies

Notes

Panels is made for modern browsers; support for older browsers will vary. Panels makes use of:

Usage

Include necessary files

<!-- include jquery -->
<script src="/path/to/jquery.js"></script>
<!-- include panels -->
<script src="/panels.min.js"></script>

Both the expanded src scss and minified compiled css files are included; link to one of them in your projects.

<link rel="stylesheet" href="/path/to/panels.min.css">

Markup

Below is a typical structure for using panels.

<body>
	<div class="panel panel-left">
		<button class="panel-trigger"></button>
		<!-- panel content goes here -->
	</div>
	<div class="panel-wrapper">
		<!-- site content goes here -->
		<button class="panel-trigger"></button>
	</div>
</body>

Both the .panel element and the .panel-wrapper element should come directly after your <body> opening tag. You must include an element with the .panel class and a single .panel-<direction> class (.panel-top .panel-right panel-bottom .panel-left) element. The .panel-wrapper element will be what you wrap your site content around; it is mandatory for panels to function.

Methods

There are two methods, and a few options.

$.panels.show({
	position: 'left', //accepted arguments are 'top', 'right', 'bottom', 'left'
	timeOut: 1000 //integer, sets the timeout between showing/hiding panel; in ms
	forceClose: true, //boolean, exclusive to the `show` method; if true clicking on body element will not close panel - default: false
});
$.panels.hide({
	position: 'left', //accepted arguments are 'top', 'right', 'bottom', 'left'
	timeOut: 1000 //integer, sets the timeout between showing/hiding panel; in ms - default: 350
});

Contributing

Feel free to fork, share and use this project.

Bugs

If you happen to come across a bug, please create an issue and include a publicly accessible reproduction of the bug. Under most circumstances this is necessary.

Improvements

I very much welcome improvements to the project. Feel free to fork and create a pull request with valuable improvements. If worthwhile, it will be merged.

License

GPL v2