https://github.com/quoid/panels

a jQuery library for off canvas elements.
https://github.com/quoid/panels

Last synced: 9 days ago
JSON representation

a jQuery library for off canvas elements.

• Host: GitHub
• URL: https://github.com/quoid/panels
• Owner: quoid
• License: gpl-2.0
• Archived: true
• Created: 2015-09-23T15:33:12.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-11-23T22:22:07.000Z (almost 9 years ago)
• Last Synced: 2024-08-01T13:33:59.149Z (3 months ago)
• Language: JavaScript
• Homepage: http://quoid.github.io/panels/index.html
• Size: 88.9 KB
• Stars: 11
• Watchers: 4
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Panels

Easy off canvas elements

[http://quoid.github.io/panels/index.html](http://quoid.github.io/panels/index.html)

## Dependencies

* [**jQuery**](https://github.com/jquery/jquery)

## Notes

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

* [CSS3 Transforms](http://caniuse.com/#feat=transforms3d)

* [CSS Transitions](http://caniuse.com/#feat=css-transitions)

* [Viewport Units](http://caniuse.com/#feat=viewport-units)

## Usage

**Include necessary files**

```html

```

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

```html

```

**Markup**

Below is a typical structure for using panels. 

```html

	


		

		

	

	


		

		

	


```

Both the `.panel` element and the `.panel-wrapper` element should come directly after your `` opening tag. You must include an element with the `.panel` class and a **single** `.panel-` 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.

```js

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

});

```

```js

$.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](https://github.com/quoid/panels/issues) 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](http://choosealicense.com/licenses/gpl-2.0/)