Auto-collapse an open mobile menu on scroll

Design help General
1

Say someone opens the hamburger menu on their phones, and starts scrolling on the page. Currently, the menu will move off screen upon scrolling down, but the menu items remain sticking out. Any quick/clever ways to toggle the menu to auto-collapse on scroll, and not just by re-pressing the hamburger button?

Thanks!

Initial open:

image
image562Ă—539 111 KB

After scroll:
image

Here is my site Read-Only: LINK

2

Bump… Anybody have any idea on how to go on about this?

3

Hello @feeei

My first thought when I read this is to create a way to close the menu with some custom code that tell’s the site to close the menu if there’s scroll on the page on mobile, but then thinking it a little bit more I found some issues:

  1. If the user has a small screen and the menu doesn’t fit the screen the user will have to scroll to see the entire menu and then the menu will close and that wouldn’t be good for UX
  2. If the user scrolls the page by accident they’ll get the same result, unhappy users :frowning: not good.

So in order to create something useful and taking into consideration different variables like screen size, etc I would suggest the following:

  1. Make the mobile menu to fill the whole page so people have to select an option from the menu.
  2. If the don’t want to select any item from the menu give them the ability to go out of the menu with a close button.

This way you “educate” your user on how you want them to use your menu.

Hope this makes sense.

4

Hey @aaronocampo, thank you for your feedback.
I hear your UX concerns and I’ll take them into consideration. For now I’m still looking for a way to have the menu collapse on scroll. Would you have any thoughts on how that could be achieved?

5

I know that this could be achieve through custom code. I don’t have the solution right now but if I find something useful for you I’ll let you know.

1 Like