pwa-studio: [bug]: When clicking a submenu in the mega the submenu won't close
Describe the bug
When a user clicks on a submenu item in the new mega menu the site navigates to the new page but the submenu stays open. When your submenu has more children this becomes very annoying.
(shame on me I knew this bug would surface and totally forgot to report it whilst the PR was open)
To reproduce
Steps to reproduce the behavior:
- Hover over a menu item that has a submenu
- Click on a submenu item
- Page navigates
- Menu stays open
Expected behavior
I’d expect the megaMenu to close on navigate as a reference check <https://www.eleganza.nl/] where i’ve fixed the issue
Screenshots
Possible solutions
I’ve solved it by toggling a new class that has the exact same styling except the hover state. Because this is a class with a different name/generated hash it the browser will remove the hover state.
Debug Report
Please let us know what packages this bug is in regards to:
-
venia-concept -
venia-ui -
pwa-buildpack -
peregrine -
pwa-devdocs -
upward-js -
upward-spec - [ >
create-pwa
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 1
- Comments: 18 (16 by maintainers)
Piling on because it’s Friday — the menu should close when you click because the user intends to see content not menu (clicking is intent).
[don’t say it, don’t say it] …also the menu shouldn’t open on hover because hover isn’t intent (clicking is, hover is deciding). I hate seeing hover menus especially if they’re mega because it’s about as frustrating as anything to avoid tripping. Hover a button to add to cart? Hover to link to follow it? Hover text to highlight it? It’s just not natural.
@sirugh A solution for the top level click is being given in the post you mentioned right?
Hey,
I am used to navigations that open on hover, and I expect if I click on the navigation link, I will go to dedicated pages. For instance, I click on Tops, and I go to the Tops category page.
Opening dropdowns on click causes one issue: you cannot go to the dedicated page because click on the link prevents this from opening the submenu.
Anyway, I know that each project can have different requirements.
I agree with @Jordaneisenburger that the mega menu should disappear when you click on the navigation link.
I would love to add these modifications to the mega menu component:
Let me know what do you think about that.
Thanks, Marcin
https://css-tricks.com/in-praise-of-the-unambiguous-click-menu/
How serendipitous 😃 posted the same day we merged mega menu!
I understand why it stays open technically but that’s not the point. What I meant is that on almost every other (non js driven) website the mega menu closes after navigate because the DOM reloads (basically resetting the state). So if for Example the menu isn’t just 100px in height but like 500 ish it’s hard for users to detect they navigated to another page.
Let’s check some other websites for example https://www.amazon.com/ or https://www.walmart.com/ wouldn’t it be weird that if you click their menu it would stay open even tho you already navigated.
In this recording the menu is hard set to replicate a menu with items that would take up 300 px in height https://user-images.githubusercontent.com/19858728/111796914-f3336300-88c8-11eb-90b8-28adfd761eea.mov