Minimal JavaScript kit without library dependencies to push things off-canvas using just class manipulation.
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.
commonJS/
ESmodule with a
require('offside-js')
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
You can install Offside.js as a Bower or NPM dependency.
# Bower bower install offside --saveNPM
npm install offside-js --save
...or import as a module:
import 'offside-js/dist/offside.css'; import offside from 'offside-js';
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.
slidingElementsSelectoris 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.
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.
Offside.js plays well with your application. Each Offside instance exposes the following methods:
offsideInstance.toggle();
offsideInstance.open();
offsideInstance.close();
offsideInstance.closeAll();
offsideInstance.destroy();
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.
init()
<!-- Off-canvas element --> <div class="offside offside--left"> <!-- Sliding element --> <div class="offside-sliding-element>
</pre> <h3>2. First offside open</h3>
<p>On first interaction with an Offside instance, <code>offside-js--interact</code> class is added to body. Sometime useful to avoid unexpected CSS behaviours on startup.</p>
<h4>Injected classes:</h4> <pre class=" language-html>
3. Offside open
Callbacks fired:
beforeOpen()
afterOpen()
4. Offside closed
Callbacks fired:
beforeClose()
afterClose()
Injected classes:
Tips and Tricks
- Set off-canvas elements width directly into
offside.cssstylesheet.- Replace
offside.csswithoffside-no-css-3d-transforms.cssstylesheet and and setdisableCss3dTransformssetting totrueto try the fallback.Do you really need a JS plugin?
If you need to set up a simple off-canvas menu, you might not need JS! This Chris Coyer's post explains a nice solution which relies on CSS :target selector. ie9+ only!
Known bugs
Off-canvas elements blocked on the page
On some old mobile browsers ( as Android 2.2.2 FroYo ) off-canvas elements won't get out the page on page load.
This happens because their internal browser do not officially support CSS transforms (see can I use chart), but, according to my experience, they only support it partially. Infact these browser are able to pass Offside CSS 3dTransform test and do not activate Offside fallback strategy.
Offside instances are normally set to
position: fixedand these browser are not able to applytranslate3dtransform to fixed positioned element.An easy - but simplistic - fix, is to switch
.offsideposition toabsoluteand properly set a relative position to a parent element (of course, it might have an impact on your page layout):.offside { position: absolute; }Off-canvas elements inside a sliding element
Like this:
<!-- Off-canvas element --> <nav id="my-offside-element"> ... </nav> ...
When an element receives a 3D transform style, It creates a containing block for all its descendants that have been set to
position: fixedorposition: absolute. Read more here.To do's
Some ideas for the future. If you'd like to see any of the following realized, please contribute or open an issue.
- Expose Offside factory initialization method (now called on first Offside instance initialization)
- Customizable Offside classes
- Declare a different set of sliding elements for each Offside instance
- Add an option to let more than one Offside instance open at same time
- Replace GruntJS with npm script tasks
- Replace callbacks with global events (maybe)
- Remove CSS 3D Transform Support check (maybe)
Working on the repository
Make sure you have node and npm on your machine. When ready, you can install Offside.js dependencies:
npm install # or npm run setupOnce everything is set up, work in
srcdirectory and builddistfiles using:npm run watch # or npm run buildUpdating gh-pages branch (just a reminder)
git checkout gh-pages git checkout master demos git checkout master distVersioning
Starting from version 1.3.0, this library uses semantic versioning.
Thanks to