4

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

enter image description here

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

Thank you.

Marius Bancila
  • 16,053
  • 9
  • 49
  • 91

4 Answers4

5

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.

Marius Bancila
  • 16,053
  • 9
  • 49
  • 91
3

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.

Mark Veenstra
  • 4,691
  • 6
  • 35
  • 66
2

You only need CSS for this.

When the side menu is opened, there is a CSS class menu-open added to the body tag.

So just add the following and you will get what you want.

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

Based on Marius Bancila's answer, here is my solution.

In CSS: nothing

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

With this you will have the same effect as Google!

alanmilinovic
  • 11
  • 2