How to create this kind of side menu component?

#1

Hello everyone, I’m having trouble implementing component which I want to place inside side menu.
Are there any suggestions how to implement this kind of side menu component?

Example is shown in the following gif image and it display selection of various available wallets. User also has ability to create new wallet with button in the footer.

I don’t know is there any generic name for this kind of component (if there is please share the name)?
Is there any kind of built-in functionality inside ionic (so that we can both logic and transition animations)?

image
test3.gif384×640 861 KB

#2

Hi,
Are you looking for Accordion list?
codepen

#3

Yes it’s quite similar to accordion list, but are few things missing.
Is there a way that accordion list can be expanded to take size of a full side menu surface.
Once again I will repeated that attached image is in GIF format, so that everyone can see how component should look like and behave.

#4

Hi @PharaohMaster, I know the following codepen won’t be what you’re expecting, but since I won’t be online for a bit, I’ll post the work-in-progress here… as idea.

I had the weird idea of changing sideMenu and content roles:

2 Likes
#5

So, here’s the finished codepen:

Changelog:

  • added custom swipe/drag/tap gestures to <fader> element to close the “over-menu”, now you can drag everywhere to open and close it;
  • added can-drag-menu element attribute to let you open the menu also swiping on other elements (in the codepen I added it on all the side-menu to let you open the “over-menu” dragging on it, but you can add it also on some elements only (e.g. only on ion-content or only on header-bar);
  • added the wallet selection menu;
  • added the fade effect to the GO PREMIUM footer-bar as seen in the GIF.

Now it should have all you need.

3 Likes
#6

Hi, very good side menu example! Something I was looking for…but how to make the menu closed on start?
And how to close the menu after clicking the link inside menu? I tried attribute “menu-close” but it doesn’t work here.

#7

thanks for this example … I tried in my application, but I don’t need an open menu when to start the app , how I can close the menu and open when to click in nav button?