Added support for nested pushbars.

README.md

@@ -1,6 +1,7 @@
 # Pushbar.js
 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.
+You can also nest pushbars, even different type ones.
 
 
 [Demo](https://oncebot.github.io/pushbar.js/)
@@ -21,21 +22,21 @@ It is fully customizable and dependency free.You can use it as sidebar menus or
         overlay:true,
       });
 </script>
-	
+
 ```
 
 ### Example HTML
 ```
   <div data-pushbar-id="mypushbar1" class="pushbar from_left">
       Push bar content 1
 
-      <button data-pushbar-close>Close</button>
+      <button data-pushbar-close="mypushbar1">Close</button>
   </div>
 
   <div data-pushbar-id="mypushbar2" class="pushbar from_bottom">
       Push bar content 2
 
-      <button data-pushbar-close>Close</button>
+      <button data-pushbar-close="mypushbar2">Close</button>
   </div>
 
   <div class="pushbar_main_content">
@@ -67,13 +68,13 @@ Open and close pushbar with api
       });
 
   //open a pushbar
-  pushbar.open('mypushbar1');	
+  pushbar.open('mypushbar1');
   //close all pushbars
-  pushbar.close();	
+  pushbar.close();
 </script>
 ```
 
-### Emitted events 
+### Emitted events
 * 'pushbar_opening': when a pushbar is opening, that pushbar element will emit this event.
 * 'pushbar_closing': when a pushbar is closing, that pushbar element will emit this event.
 

demo.css

@@ -1,101 +1,110 @@
-.wrapper{
+.wrapper {
 	max-width: 678px;
 	margin:auto;
 }
 
-pre {
-    border-left: 0.3rem solid #4039ff;
+pre  {
+	border-left: 0.3rem solid #4039ff;
 }
-body{
+
+body {
 	background:#f2f2f2;
 }
 
-.push_left{
+.push_left {
 	margin-left: 6px;
 }
-.push_right{
+
+.push_right {
 	margin-right: 6px;
 }
-code,xmp{
+
+code,xmp {
 	white-space: normal !important;
 }
-textarea{
-    margin-bottom: 0px;
-    min-height: 200px;
-    line-height: 1;
+
+textarea {
+	margin-bottom: 0px;
+	min-height: 200px;
+	line-height: 1;
 }
 
-.close{
-    width: 20px;
-    height: 21px;
-    position: relative;
-    display: inline-block;
-    vertical-align: text-bottom;
-    text-align: center;
-    cursor:pointer;
+.close {
+	width: 20px;
+	height: 21px;
+	position: relative;
+	display: inline-block;
+	vertical-align: text-bottom;
+	text-align: center;
+	cursor:pointer;
 }
+
 .close:before, .close:after {
-    position: absolute;
-    left: 10px;
-    content: ' ';
-    height: 21px;
-    width: 3px;
-    background-color: #fff;
+	position: absolute;
+	left: 10px;
+	content: ' ';
+	height: 21px;
+	width: 3px;
+	background-color: #fff;
 }
+
 .close:before {
   transform: rotate(45deg);
 }
+
 .close:after {
   transform: rotate(-45deg);
 }
 
-
-.card{
+.card {
 	margin:20px;
-    border-radius: 5px;
-    background:#fff;
+	border-radius: 5px;
+	background:#fff;
 	box-shadow:0px 0px 20px rgba(0, 0, 0, 0.1)
 }
-.card_title,.title,.pushbar{
-    background: #4039ff;
-    color: #fff;
+
+.card_title,.title,.pushbar {
+	background: #4039ff;
+	color: #fff;
 }
 
-.card_title,.title{
+.card_title,.title {
 	padding: 15px 20px;
-    font-weight: bold;
+	font-weight: bold;
 }
-.card_title{
-border-radius: 4px 4px 0px 0px;
+
+.card_title {
+	border-radius: 4px 4px 0px 0px;
 }
-.card_content{
+
+.card_content {
 	padding: 15px;
 }
-a.button.getBtn{
-margin-top: 16px;background-color:#fff;color:#4039ff;border-color: #fff;
-}
-
-
-
 
-.pushbar{
+a.button.getBtn {
+	margin-top: 16px;background-color:#fff;color:#4039ff;border-color: #fff;
+}
 
+.small {
+	font-size: 14px;
+	font-weight: 400;
 }
 
-.small{
-font-size: 14px;
-font-weight: 400;
+.menu {
+	margin: 0;
+	font-size: 100%;
 }
-.menu li{
-    list-style: none;
-    padding: 15px 20px;
-    border-top: 1px solid rgba(255, 255, 255, 0.2);
-    display: block;
-    margin: 0px;
-    color: rgba(255, 255, 255, 0.65);
+
+.menu li {
+	list-style: none;
+	padding: 15px 20px;
+	border-top: 1px solid rgba(255, 255, 255, 0.2);
+	display: block;
+	margin: 0px;
+	color: rgba(255, 255, 255, 0.65);
 }
 
 .button, button, input[type='button'], input[type='reset'], input[type='submit'] {
-    background-color: #4039ff;
-    border: 0.1rem solid #4039ff;
-}
+	background-color: #4039ff;
+	border: 0.1rem solid #4039ff;
+}