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