(ionic) How can I make side menu overlaying contact?

Question

Recently, I tried creating an Ionic side menu. I want to make the side menu overlaying contact.

I do not want to push content, however.

    <ion-side-menus>
  <!-- Center content -->
  <ion-side-menu-content ng-controller="ContentController">
  </ion-side-menu-content>

  <!-- Left menu -->
  <ion-side-menu side="left">
  </ion-side-menu>

  <!-- Right menu -->
  <ion-side-menu side="right">
  </ion-side-menu>

  <ion-side-menu-content>
  <!-- Main content, usually <ion-nav-view> -->
  </ion-side-menu-content>
</ion-side-menus>

    function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

Answer 1

Some other people have already requested this feature. http://forum.ionicframework.com/t/side-menu-overlaying-rather-than-pushing-center-content/4361 As of what I know there is no work around unless you wanted to rewrite the directive/animations for the side menu.

Answer 2

There is a fork for this

https://github.com/driftyco/ionic-ion-drawer

And the example on codepen. http://codepen.io/Yuripetusko/pen/VYqRNg

As i know it has not been merged with the main repo so you have to bring in the file separately and then add it to the module

angular.module('ionicApp'['ionic','ionic.contrib.drawer'])
       .controller('appCtrl', function($scope) {   
});

Answer 3

Try this one. This is exactly what you are looking for.

http://nlmd.vincurekf.cz/