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.

									
															<script type="text/javascript">
                     & nbsp new Pushbar({
                     & nbsp & nbsp	blur: true,
                     & nbsp & nbsp	overlay: true,
                     & nbsp });
								</script>
							
							
						
					

						Example html
						

						

															//CHANGE: Older version of pushbar used class="pushbar from_left"
								  <div data-pushbar-id="mypushbar1" data-pushbar-direction="left">
									   	Push bar content 1

									   	<button data-pushbar-close>Close</button>
								  </div>

								//CHANGE: Older version of pushbar used class="pushbar from_bottom"
								  <div data-pushbar-id="mypushbar2" data-pushbar-direction="bottom">
									   	Push bar content 2

									   	<button data-pushbar-close>Close</button>
								  </div>

								  <div class="pushbar_main_content">
									   	Main content of the page

									   	<button data-pushbar-target="mypushbar1">
									   	Open my pushbar 1
									   	</button>

									   	<button data-pushbar-target="mypushbar2">
									   	Open my pushbar 2
									   	</button>
								  </div>
							
					

						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
															<script type="text/javascript">
									const pushbar = & nbsp new Pushbar({
                     	& nbsp & nbsp	blur: true,
                     	& nbsp & nbsp	overlay: true,
                     	& nbsp });

									//open a pushbar
									pushbar.open('mypushbar1');
									//close all pushbars
									pushbar.close();	
								</script>
							
						
					

						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.