Pusha is a lightweight but complete off-canvas solution.
- Output panels before the
pusha-wrapper - Use the
pusha-pushclass on fixed elements (e.g. header) - Close events are bound to the first element with a
data-closeattribute inside a panel
<!doctype html><html><head><linkrel="stylesheet" href="dist/css/pusha.min.css" /></head><body><divclass="pusha-panel pusha-panel--left" aria-hidden="true"><divclass="pusha-panel__content"><p>Panel</p><buttondata-close>Close Panel</button></div></div><headerclass="header-fixed pusha-push"><p>Header</p></header><divclass="pusha-wrapper"><p>Content</p><buttonclass="js-open-panel" aria-expanded="false">Open Panel</button></div><scriptsrc="dist/js/pusha.min.js"></script><script>varpanel=newPusha('.pusha-panel--left');document.querySelector('.js-open-panel').addEventListener('click',panel.open);</script></body></html>$pusha-z-index: 200;
$pusha-duration: 0.3s;
$pusha-easing: ease;
$pusha-blocker-z-index: $pusha-z-index+10;
$pusha-blocker-duration: $pusha-duration;
$pusha-blocker-bg: rgba(0, 0, 0, 0.5);
$pusha-directions: (left, right, top, bottom);.my-panel {
@includepusha-panel(
$direction: left, // left, right, top, bottom$mode: push, // push, pull, overlay, fade$width: 260px,
$height: 100%,
$background: #fff
);
}newPusha('.my-panel',{closeOnEsc: true,closeOnClick: true,disableOverscroll: true,disableBodyscroll: false,activeClass: 'pusha-active',onOpen: function(panel){},onClose: function(panel){}});Note: Setting disableBodyscroll to true may lead to degraded scroll performance.
varpanel=newPusha('.my-panel');// Public methodspanel.open();panel.close();panel.toggle();// Public propertiespanel.isOpen;varpanel=newPusha('.my-panel',{onOpen: function(panel){panel.children[0].scrollTop=0;}});The code is released under the MIT license.