Modifying ion-side-menu or repurposing the same drag/snap logic


I want to build a slightly different version of <ion-side-menu>. The current menu works by sliding the main content area out of the way to reveal a fixed position menu “behind”. I would like to reverse it, so the content remains fixed, but the menu slides in/out over the top.

While I can achieve a simple version of this, it doesn’t come with all the logic I can see in <ion-side-menu>. Things like…

  • You can drag from the edge of the main content to begin dragging open the main menu.
  • When you drag a slight distance, it automatically snaps back.
  • Or if you drag over half way, it will snap all the way open.
  • If you drag quickly it will snap open all the way as well.

I have noticed similar logic powering <ion-slide-box> as well with regards to dragging, snapping, etc.

Where is this logic? How can I use it?

I understand collide might be powering some of this, but I would rather not try to rebuild it given I want to use all logic that currently powers the <ion-side-menu>.

Is there a way I can find the drag/open/close code for <ion-side-menu> and just re-purpose it?

Edit: Here is a codepen of what I mean:

Of course, the menu only shows when you click the button and hides when you click inside the menu somewhere. But I want to have all the drag/snap logic that comes with ion-side-menu as well, and given that logic already exists to power ion-side-menu and largely in ion-slide-box, I was hoping someone could help me work out how to re-use it.


Something like this?

But only in reverse, where new slide should animate over the old one?


Sorry, that link just goes to the top of the page. Which plugin were you referring to?


My mistake, take a look now.