Offside.js

[![Build Status][ci-img]][ci]

[ci-img]: https://travis-ci.org/toomuchdesign/offside.svg
[ci]: https://travis-ci.org/toomuchdesign/offside

Offside.js is a minimal JavaScript kit without library dependencies to push things off-canvas using just class manipulation. It's goal is to provide a super-lightweight, efficient and customizable way of handling off-canvas menus/elements on modern website and web applications.

Offside.js comes with its own default stylesheet which make use of CSS 3D transform, but you can write your own CSS hooking your style with Offside classes. This ensures super flexibility and completely decouples Offside.js from your style/markup.

Demos

- Single element
- Single element (without css 3dtransforms)
- Multiple elements
- Multiple elements (without css 3dtransforms)
- Typical setting

Features:

- Minimal DOM manipulations
- No library dependencies
- Uses CSS3 3D transforms (if you want to)
- No injected style. Offside entirely relies on classes manipulations
- BEM-like style
- Degrades gracefully on browsers not supporting CSS3 3D transforms
- Handles multiple off-canvas elements
- Left/right off-canvas
- Style agnostic
- No need of extra classes or any specific markup.
- Consumable as commonJS/ES module with a require('offside-js')

Browser Compatibility

All modern browsers and ie9+.

Offside.js relies on EventTarget.addEventListener / removeEventListener and querySelector / querySelectorAll methods without any fallback.

Check relative browser compatibility:
- EventTarget.addEventListener / removeEventListener
- querySelector / querySelectorAll

Usage instructions

$3

You can install Offside.js as a Bower or NPM dependency.

``sh


Bower

bower install offside --save

NPM

npm install offside-js --save
`

$3

`html



`

...or import as a module:

`js
import 'offside-js/dist/offside.css';
import offside from 'offside-js';
`

$3

`html

Offside toggle








`

Offside.js is designed to work with your existing HTML.

It doesn't pre-requires any specific markup. When Offside initializes It just adds a few classes on existing DOM elements.

$3

`html


`

#### What are "sliding elements"?

slidingElementsSelector is a selector list of all elements which slide out when an off-canvas element slides in. It's usually the page wrapper.

Use it only when you need your page to slide together with you off-canvas element.




$3

`javascript
var myOffside = offside( '#my-menu', {

// Global offside options: affect all offside instances
slidingElementsSelector: '#my-content-container', // String: Sliding elements selectors ('#foo, #bar')
disableCss3dTransforms: false, // Disable CSS 3d Transforms support (for testing purposes)
debug: true, // Boolean: If true, print errors in console

// Offside instance options: affect only this offside instance
buttonsSelector: '#my-button, .another-button', // String: Offside toggle buttons selectors ('#foo, #bar')
slidingSide: 'right', // String: Offside element pushed on left or right
init: function(){}, // Function: After init callback
beforeOpen: function(){}, // Function: Before open callback
afterOpen: function(){}, // Function: After open callback
beforeClose: function(){}, // Function: Before close callback
afterClose: function(){}, // Function: After close callback

});
`
Global offside options are set when first Offside instance is created. This happens because Offside factory is created when the first offside() call occurs.




Public methods

Offside.js plays well with your application. Each Offside instance exposes the following methods:

offsideInstance.toggle();

offsideInstance.open();

offsideInstance.close();

offsideInstance.closeAll();

offsideInstance.destroy();




How does it work?

When the first Offside element is initialized, a singleton Offside factory is created and used to return the first Offside instance. The factory keeps track of all initialized Offside elements.

Offside.js is entirely based on classes injection and custom callbacks. No style is DOM injected. Never!

Classes are injected in just 3 elements:
- body
- off-canvas elements
- sliding elements

Here a brief explanation.

$3

#### Callbacks fired:
- init()

#### Injected classes:
`html