Make ion-side-menu open over ion-side-menu-content

ionic-v1
1

In my current project I would like to have the side menu open over (above) the content.
Ideally the side menu would be transparent and act as a kind of overlay over the main content.
Is this somehow possible with the given directive?

Any help would be very appreciated :slight_smile:

1 Like
2

You solved this with ionic framework??

I have the same problem, Apparently, there is not a easiest way to make this with ionic… So We need to solved this with the old way.

Best
C

3

No, sorry for my bad english, I meant to say that I would like to behave it the way I described.

So far I couldn’t come up with an easy Ionic solution, so I decided to ask the community first.

4

Your english is ok… mine stinks. :P.

I’m looking the same for my app, so… If you found any solution, please share with the comunity :)…

Best

5

Looking in the directive code it adds a translate x, you want it to be 0.

To have the menu visible the z-index must be increased:

.menu.menu-left {
    z-index: 5 !important;
}

Though I don’t think you’ll want to alter Ionic’s core code. You could create your own directive with copying the sideMenuContent directive and alter as pleased.

6

This looks promising, I’ll take a look at it later, and will tell you about how it worked out for me!
thx!

7

That CSS move the menu to the front without animations, the things is, how you remplace that directive for new one, without change the core code of ionic? I don’t find any handler for that… :frowning:

9

There is this component we have right now.

To make it work with the current side-menu codebase would too big of a hack.
So we’ve pushed it out to an external ion.

10

I have the same problem, I find a customized side-menu template and I tweak it a little bit.
https://github.com/ChuanLiu0316/ionic-transparent-sidemenu. See if it helps :slight_smile: