Gray page content when side menu opens

Question

If you look at all Google applications, when you open the side menu (hamburger), the contents of the application are gray.

Here is an example

Is it possible to do this with help ion-side-menuin the ionic framework? If so, how?

Thank.

Answer 1

I believe that this is not standardly available in Ionic, but if you look at it $ionicModal, you will see that they use the same technique there.

If you look at the CSS that 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 open, and then apply over CSS to <ion-nav-view>.

, , $ionicSideMenuDelegate.isOpen() CSS.

Answer 2

, , .

CSS:

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

:

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

ng-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>

, .

Answer 3

CSS.

, body ..

, , , .

body.menu-open ion-side-menu-content {
    -webkit-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
    opacity: 0.5;
}

Answer 4

, .

CSS: nothing

:

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

In the template, I used the background class of the background background instead of your opaque content, which is not 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>

With this you will have the same effect as Google!