I want to implement floating-menu in Ionic 2 Project

Question

So far I have implemented buttons i.e (ion-fab) but the button labels can only be placed on top or bottom of the buttons. I want to place them on the left side of button. Image attached for more clarification.

Answer 1

HTML CODE

<ion-content>
    <div id="ListBackdrop" *ngIf="fabButtonOpened==true" ></div> 
</ion-content> 
<ion-fab right bottom #fab>
   <button ion-fab (click)="openFabButton()">
       <ion-icon name="add"></ion-icon>
    </button>
   <ion-fab-list side="top">
     <button ion-fab>
         <img src="assets/friend_add.png"> 
     </button>
     <ion-label class="fablabelfriend">Friend</ion-label>
     <button ion-fab>
             <img src="assets/family_add.png">
     </button>
     <ion-label class="fablabelfamily">Family</ion-label>
   </ion-fab-list>
 </ion-fab>

Css File

   .fablabelfamily
            {
              position: absolute;
              width: 100%;
              padding-right: 220px;
              padding-bottom: 75px;
              margin-top: 0px;
              margin-bottom: 0px;
              font-weight: bold;
            }
.fablabelfriend{
             position: absolute;
             width: 100%;
             padding-right: 220px;
             padding-bottom: 30px;
             margin-top: 10px;
             margin-bottom: 0px;
             font-weight: bold;
          }
#ListBackdrop{
         background-color: white !important;
         position: fixed !important;
         height: 100%;
         width: 100%;
         z-index: 1;
         opacity: 0.8
      }

TypeScript File

 export class myClass{
     fabButtonOpened: Boolean;
      constructor(public navCtrl: NavController, private global: globalVariable, private http: Http, public platform: Platform) {
         this.fabButtonOpened=false;

//All other functions inside constructor 
    }

        openFabButton(){
          if(this.fabButtonOpened==false){
              this.fabButtonOpened=true;
          }else{
              this.fabButtonOpened=false;
          }
        }
    }

Answer 2

Anu's answer worked for me but the labels prevented me from clicking on my buttons. I made the following edit to fix this. The overlaps the buttons on top since the labels positions are fixed.

 <ion-fab-list side="top">
   <ion-label class="fablabelfriend">Friend</ion-label>
  <ion-label class="fablabelfamily">Family</ion-label>      
  <button ion-fab>
     <img src="assets/friend_add.png"> 
  </button>
  <button ion-fab>
      <img src="assets/family_add.png">
  </button>

   </ion-fab-list>
 </ion-fab>

Answer 3

Adding more to above fixes. You can make the labels clickable by

button[ion-fab] {
  ion-label {
    pointer-events: auto;
  }
}