Pushbar.js
☕️ Buy Me A
Cofee
Pushbar.js is a tiny javascript plugin for creating
sliding drawers in web apps
It is fully customizable and dependency free.You can use it as sidebar menus or
option drawers.
New! [ IMPORTANT: USES HAS SLIGNT CHANGE, SEE BELOW ]
- It's now even smaller and more effitient.
- Code is now beautified.
- Added to NPM.
- Added to CDN.
Installation
- Add the pushbar.css file to the head of your html. [CDN: https://cdn.jsdelivr.net/npm/pushbar.js@1.0.0/src/pushbar.min.css]
- Add the pushbar.js file to the head of your html or right before the closing body tag. [CDN: https://cdn.jsdelivr.net/npm/pushbar.js@1.0.0/src/pushbar.min.js]
- Add this code after the pushbar.js script tag to initialize the plugin.
Example html
Direction attributes [NEW]
You can use 4 directional attributes in pushbar elements
- data-pushbar-direction="left" So that the pushbar opens from left
- data-pushbar-direction="right" So that the pushbar opens from right
- data-pushbar-direction="top" So that the pushbar opens from top
- data-pushbar-direction="bottom" So that the pushbar opens from bottom
Options
- blur : set it to true for blur effect on the main content (Default:false)
- overlay : set it to true for dark overlay effect on the main content (Default:true)
API
Open and close pushbar with api
Events
'pushbar_opening': when a pushbar is opening, it will emit 'pushbar_opening' event with an object { element, id }, Where element will be the current pushbar element and the id is the current pushbar id.
'pushbar_closing': when a pushbar is closing, it will emit 'pushbar_closing' event with an object { element, id }, Where element will be the current pushbar element and the id is the current pushbar id.