Grey page content when side menu is opened

ionic-v1
1

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.

2

Here is what I came with:

In CSS:

.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:

$scope.$watch(
   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-menus>
   <ion-side-menu-content ng-class="{'opaque-content' : sidemenuopened}">
      <ion-nav-bar>
      </ion-nav-bar>

   </ion-side-menu-content>
</ion-side-menus>

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

2 Likes
3

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

<ion-side-menus>
   <ion-side-menu-content>
      <div ng-class="{'modal-backdrop-bg' : sidemenuopened}"></div>
      <ion-nav-bar>
      </ion-nav-bar>

   </ion-side-menu-content>
</ion-side-menus>