Popup side menu?

Is there any ETA on the popup side menu feature or should I create my own?

I have an app I need in production in just under 60 days.

I guess the developers either don’t frequent their own support forum or simply don’t want to provide an answer.

In that case, I’ll have to create my own. How can I create a popup side menu?

How do I replicate the behaviour of displaying a screen like this?

1 Like

Hi,

At the moment there’s no ETA on the popup menu, so in your timeline I would suggest making your own. Basically you would make a container to the side with all the content, and toggle its visibility to show or hide it when clicked. Here’s a couple of forum threads covering this topic:

Thanks for the link.

Unfortunately, one of the posts comes to the conclusion it’s not possible to create a side menu. And the other is referring to creating your own tabbed page view.

The logic in the tabbed page view is applicable to creating a side pop-up menu. It demonstrates how to make one view appear or disappear when clicked, just like the side menu would work I assume. And the note about how to create a sticky component would help in always keeping the menu in the same spot in your screen. The other thread comes to the conclusion that there is no direct way to do this, but it is possible with a bit of a hack :grin: the easiest implementation of this would be by using 3rd party plug-ins which is still unfortunately a work-in-progress on our part.

i made one last night. definitely possible. took about an hour to set up

image

I have the sideMenu set to 100% height/width with 0 margins/padding and on z+1 absolute position background is black 50% alpha. menu body is about 85% width, 100% height. Inside there I have a header with a login link that is at the top. A scroll view with a flex to fill the middle, and a footer down at the bottom.

The hamburger button it set to a true/false page variable that hides or shows the sideMenu component. When it is hidden I have another hamburger menu hanging out that a user can tap to do stuff.

https://usabilitygeek.com/ui-patterns-for-navigation-good-ux/

I used this page for inspiration.

4 Likes

oh - using any animations at all anywhere in the app broke this feature after at most 2 cycles of opening and closing the menu. i feel bad to look a gift horse in the mouth, but the animation feature so far has done nothing but make me want to pull my hair out. About half an hour of the time to set up the menu was trying to get the animations to work, and then finally getting rid of them all forever.

3 Likes

@mac Thanks for this tip! Added a container, and did as you wrote and BAM! side menu, added a fade-in animation and I really like it. This is a great way to maximize the real estate of the screen, dumping my various buttons and items into the side menu with a burger icon to show it.

Disable the source button while menu is actived.

Is it possible to extend this function so that if you tap outside the navigation menu i.e. the 50% black space in the example above the page content behind is displayed and the menu removed.

are there any news on tapping outside the menu is hiding it? I can’t create an unfocus event or sth else and i can’t find any option for this.
I tried to solve this with tap the component outside this menu, but then it also shows the tap animation of the outside component and my app crashes when i try to click a second time on the button to show the menu.
When i delete all animations of this component it works fine.

Este video me ayudo mucho a tener muchas ideas, puede que te funcione algo y le puedes preguntar al autor que está aquí mismo en AppGyver:

Usuario en AppGyver: @Curiositylab
Canal Menú: AppGyver tutorial to design an AWESOME tasty hamburger menu - YouTube

gracias! i got this working, but my app is still crashing when i try to use the animations. It’s every time i click a second time on the burger icon to open the menu. So first time works, but second time doesn’t.