Grey page content when side menu is opened

Question

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

Here is an example

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

Thank you.

Answer 1

Based on Mark Veenstra's answer, here is the result 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.

Answer 2

I believe this is not standard available in Ionic, but if you look at the $ionicModal you can see they do use the same technique there.

If you look at the CSS they use for this option, you should add the following to the correct class:

opacity: .5;
transition: opacity 300ms ease-in-out;
background-color: #000;

You should somehow detect when the side menu is exposed and then apply above CSS to the <ion-nav-view>.

I think you could create a directive or so which watches the $ionicSideMenuDelegate.isOpen() function and based on result apply or remove the CSS.