Hamburger menu long and longer

Hi.

This question might have been asked before, but i do not find an answer in the tons of postings.

For my mobile page i have only one hamburger menu like this:
• item_1
• • 5 submenus
• item_2
• • 6 submenus
• item_3
• • 4 submenus

When i hit item_1, the dropdown shows up (ok). And when i hit item_2 the next dropdown appears but the 5 submenus from item_1 do not collapse - and so on. Finally i have 18 boxes open and the last ones are not visible on the smartphone.

Do i miss a setting, that only 1 set of submenus is open and the others collapse automatically? Could that be fixed?

Thanks for help.

Mr. F.

I think you would be better creating a more user-friendly navigation structure for mobile users. Multiple choice, ever expanding menus are frustratingly awkward for mobile users, and they can often become a deterrent from people using your mobile site.

As a general rule, a hamburger menu should really only have one level of links and should only occupy a maximum of one screen (no scrolling). If you have sub-categories of navigation, best to have the main link go to a category page where the sub-categories can be listed, maybe in a more interesting graphical format, such as image links to help maintain interest for the user. If you keep your hamburger menu as a sticky at the top of all pages, switching to another category is simple and effective.

2 Likes

Hello.

That doesn’t answer my question, but thanks anyway.
So the solution is that there is no solution and you should avoid this construct? Very unsatisfactory.

Mr. F.

@Mr_Fozzie, You could bring it up with @duncan to see if it could be added?

For me I also keep my mobile navigations to the “top level” for the reason. like the the dropping open toggle, it is disorientating for the user.

What you could do which I just thought of is have popups, and in your case it would be 3 plus the main. When a top level link is touched the popup sub-level links slide in. I haven’t tried it myself but it is worth the experimenting if you feel you need to go with your posted idea…

Hi @ all.

Yes, Mr. “Sherlock” Duncan should have a look at this.
I thought that the hamburger style menu has been designed for “small” devices. With the 2nd level submenu it takes only 1 klick to go to another 2nd level submenu. No detour.

I try to figure out how to put that in a slide in popup menu when the “auto collapse” can not be implemented.

Addendum: I also noticed that the mouse effect (changing the text color) in the top menu items remains, even if the mouse is no longer over it and another menu is already open. 2 active menu items are displayed, although only one should be active.

Mr. F.

This was actually the original behavior and we changed it because it was very frustrating to use, particularly on mobile, because of the tap target moving away unpredictable. Very confusing.

My suggestion for mobile is to use a full screen mobile menu, here’s a post on how to build it out:

If that popup then contains a menu that expands, the popup can scroll. I think that’s less of an issue than the auto-collapsing menu.

Hello Duncan.

Thank you. That was the part i was missing.
Has anybody build this menu that i can have a look at some samples?
I guess i do not use the hamburger style menu in the popup, but “vertical” instead.
And the close X button is not needed, because selecting a menu item will close the popup.

Mr. F.

Our website (sparkleapp.com) has that kind of full screen menu, built with a popup, though it doesn’t scroll.

Hi. The menu I built on

https://www.littlewoldvineyard.co.uk/

May be similar to what your trying to achieve?

Yes, that could be the solution for me.
I’m not sure if i add only the “main” links or if i should make a full site map.
Sometimes less is more.

Mr. F.