Offside.js is a minimal JavaScript kit without used jQuery-library dependencies to push things off-canvas using just class manipulation. Its’s use easy & light weight for website and web applications.
Table of Contents
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/ESmodule with arequire('offside-js')
How to use :
Add css & js in html :
<!-- Put these into the <head> -->
<link rel="stylesheet" href="dist/offside.css">
<script src="dist/offside.js"></script>
Add HTML code in page :
<!-- Off-canvas toggle button -->
<button type="button" id="my-button">Offside toggle</button>
<!-- Off-canvas element -->
<nav id="my-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Your Content -->
<div id="my-content-container">
...
</div>
Hook up the plugin :
<!-- Put this right before the </body> closing tag -->
<script>
//Offside.js minimal setup
var myOffside = offside( '#my-menu', {
slidingElementsSelector:'#my-content-container',
buttonsSelector: '#my-button, .another-button',
});
</script>
Customizable options :
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
});
Done
Thanks for make jQuery plugin is developed by toomuchdesign For more Helpfull for users, please check the demo page or visit the official website.
