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 is an example

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

Thank you.

Answers


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.


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.


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

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!


Need Your Help

Looping in PLSQL

sql database oracle loops plsql

Have you ever been working on something, found an easier way to do it, completed the project, but still wanted to get the first way to work?

ViewPager disable swiping to a certain direction

android android-viewpager swipe

I want to disable the swiping, but only to the right side. I found a working solution in this answer. Unfortunately, this copies the whole ViewPager source to achieve the goal. Is there any methods...