Grey page content when side menu is opened


If you look at all the Google apps when you open the side (hamburger) menu the content of the app is greyed.

Here are a couple of examples:

Is it possible to do this with the ion-side-menu? If so, how?

Thank you.


Here is what I came with:


.opaque-content {
   opacity: .5;
   transition: opacity 300ms ease-in-out;

In the controller I’m watching the open ratio of the side menu and set a flag:

   function () {
      return $ionicSideMenuDelegate.getOpenRatio();
   function (ratio) {
      $scope.sidemenuopened = (ratio == 1);

In the template I’m using ng-class to conditionally apply the class:

   <ion-side-menu-content ng-class="{'opaque-content' : sidemenuopened}">


This works and makes the page content partially transparent when the side menu is opened.


In the template I used modal backdrop background class instead of your opaque-content which isn’t gray at all:

      <div ng-class="{'modal-backdrop-bg' : sidemenuopened}"></div>