Menu panel: drop shadow over above the menu-content

ionic-v1
1

Hi lads,
I’m new to the framework so, please, be patient.

I want to cast a shadow onto the menu-content so that when the menu is open it looks like it sits above the content.

I’ve found the following will cast a shadow so that the panel looks like sitting below the content, but I didn’t manage to make it look the other way around: any suggestion?

.menu-content {
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.5);
}
2

Has this passed unread or is it not possible within Ionic framework? Was my explanation/request not clear?

3

I want to accomplish the same effect and found nothing either

4

I had it working with

<ion-content ng-class="{'drop-shadow': side_menu.isOpen()}">

and

ion-content.drop-shadow {
    box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.3) inset;
    /*inset is very important here*/
}

If you don’t mind the drop shadow being there all the time (even when the side menu is not opened), you can remove the “ng-class” and “drop-shadow” class mechanism.
Also, before anything : try in your fav browser whether setting the box-shadow style on ion-content works for you. If it does not, you can try applying it to ion-content’s children.