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?
Stop. Where can I get it?
The Javascript and CSS can be downloaded here
Setup
Include the Javascript and CSS files in your <head>
tag. Note: the links below are for the development CDN.
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).
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.
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.
Left menuCras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
Add the sidey-content
class to your content
which you want to push to allow sidey menu to be visible
or
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
:
$;