https://github.com/mrvautin/sidey

Quickly and easily add an offcanvas sidebar to any page
https://github.com/mrvautin/sidey

Last synced: about 1 month ago
JSON representation

Quickly and easily add an offcanvas sidebar to any page

• Host: GitHub
• URL: https://github.com/mrvautin/sidey
• Owner: mrvautin
• License: mit
• Created: 2016-08-18T11:37:48.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-08-21T01:37:59.000Z (over 8 years ago)
• Last Synced: 2024-11-13T10:25:24.343Z (about 2 months ago)
• Language: HTML
• Size: 17.6 KB
• Stars: 1
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## What is it?

**sidey** is a jQuery plugin which allows you to quickly and easily add an offcanvas sidebar or menu to any page. **sidey** only

requires small adjustments to your HTML markup and a two very small Javascript and CSS files (700 bytes and 2KB). **sidey** plays nice with 

Bootstrap and other frameworks.

## What does it look like?

[Demo](http://mrvautin.github.io/sidey.html)

## Stop. Where can I get it?

The Javascript and CSS can be downloaded [here](https://github.com/mrvautin/sidey/archive/master.zip)

## Setup

Include the Javascript and CSS files in your `` tag. Note: the links below are for the development CDN. 

``` html    

```

Setup the instance of **sidey**. This sets up all `sidey-left` and `sidebar-right` elements into **sidey** sidebars and adds listeners on the toggles. (see `index.html` for an example).

``` html

$(document).ready(function(){

    $.sidey();

});

```

Create the toggle for the sidebar / menu. Be sure to include the `data-element` with the unique sidebar element you want to toggle and add the `sidey-toggle` class.

**Note: The `data-element` will use CSS selectors - eg: `.` for class and `#` for element ID.

``` html



```

Create your sidebar / menu (**can have multiple**) with either the `sidey-left` or `sidey-right` class to tell **sidey** the direction. Be sure to have your sidebar element outside

of your main content element. We want the content to be pushed out the way for the sidebar to appear. See `index.html` for a working example.

``` html



    
Left menu

    


        
Cras justo odio

        
Dapibus ac facilisis in

        
Morbi leo risus

        
Porta ac consectetur ac

        
Vestibulum at eros

    



```


Add the `sidey-content` class to your `content` which you want to push to allow **sidey** menu to be visible

``` html

```

or 

``` html



```


## Options

**sidey** is meant to be simple and there is deliberately not many options. 

The only option is whether to blur/darken the background when the **sidey** menu is open. By default this is true/on. 

To remove simply setup **sidey** with the `backgroundBlur` option set to `false`:

``` javascript

$.sidey({backgroundBlur: false});

```