It is fully customizable and dependency free.You can use it as sidebar menus or option drawers.

Left pushbar

Right pushbar

Top pushbar

Bottom pushbar

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



//CHANGE: Older version of pushbar used class="pushbar from_left" Push bar content 1 Close //CHANGE: Older version of pushbar used class="pushbar from_bottom" Push bar content 2 Close Main content of the page Open my pushbar 1 Open my pushbar 2

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