Side menu shadow on top of content

ionic-v1
1

Hi,

I am working on my side menu, I managed to put a “backdrop” effect (like in modals) on the main content when I open my side menu, but I can’t find a way to add a shadow that goes at the right of my left side menu on top of the main content.

The only solutions I found online are like this one:

Bringing a shadow at the left of the main content toward the sidemenu, making it look like the main content is on top of the sidemenu.

But I want the sidemenu to look on top.

Anyone has a solution?

Thanks a lot.

2

I’m starting to believe there is no way to do it on the ionic side menu… Does it only work with the drawer library?

3

Hey

Where you able to find a solution for this?

Thanks in advance!

4

Hi, unfortunately not.

But at least I know I’m not the only one needing this now.

5

Hey I was able to make this work.

I placed the box-shadow property in the ion-side-menu element and it worked, don’t forget to also include a z-index bigger than the one in ion-side-menu-content.
However, be careful with the z-index property, because it can only be bigger when the menu is open, otherwise it will always be visible.

So, concluding, add the box-shadow in the ion-side-menu element and include a big z-index when the menu is opened.

6

This is wonderful, working like a charm. The z-index property was the one missing indeed, thanks a lot!

7

I’m actually having issue to implement it properly…

I added the class .shadowMenu on the ion-side-menu side=“left”, that gets activated once the menu is open:

.menu-open .shadowMenu {
	box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.3) !important;
    z-index: 1000 !important;
}

However, this kills the animation of the sliding side menu to open.
Because after about 100ms, when the body takes the class menu-open, the side-menu suddenly jumps with a z-index that makes it on top of the whole content. It’s all sudden, killing the animation.

Do you have the same problem? How did you implement it smoothly?

1 Like
8

Yeah I noticed the same problem.
I opted for using in the equivalent to your class .shadowMenu

transition:all 10s;
-moz-transition: all 10s;
-webkit-transition: all 10s;

This way you can adjust the seconds to make it more or less smooth as you want. There are other ways to make animations (javascript, jquery,…) but for me this was the easiest.

Hope it works.

1 Like
9

Thanks guys, this helped me! The combination of z-index when menu is open and the transition is the key.