Slider Panel
Docs
A simple sliding panel to display off-canvas contents. The panel pushes the exiting body content to the right and smoothly transitions into the view area. This addon uses css transforms (translate3d) and cubic bezier transitions to achieve the sliding effect.
Browser Compatability
- Firefox 4.0 (2.0)+
- Chrome 4.0+
- Internet Explorer 10+ (Really? Even IE? :O)
- Opera 10.5+
- Safari 3.1+
Getting Started
Add data-slide="push" to <body>
<body data-slide='push'>
Add Panel content <div class="slider-panel"></div>
<div id='example-panel' class='slider-panel'></div>
Enclose the page content inside a .wrapper class <div class="wrapper"></div>
<div class='wrapper'>...</div>
Add data-panel="[div-id]" to the <button> or <a> which on clicked will trigger the slide transition
<a href='#' data-panel='example-panel'>slide</a>
Voila! Nothing else to do! Check out the example code below. Also view the demo by clicking at the top left button in the navbar.
Example