Browser: Safari Version 14.1.2 (16611.3.10.1.6) Browser: Google Chrome Version 98.0.4758.80 (Official Build) (arm64) Browser: Firefox 97.0 (64-bit)
When clicking a top-level menu item to expand the submenu, the entire mobile menu closes and I need to click the hamburger again to open the mobile menu and see my expanded submenu.
I have also perceived that before I started a more thorough testing, I could expand one submenu without problems, but when expanding any other, secondary submenu, the mobile menu closed. However I am unable to replicate that specific case right now and the previous paragraph is how it behaves at the moment.
Browser: Safari on iPhone 6s with iOS 13.5.1
I am able to click any top-level item and get the submenu expanded, but the mobile menu closes if I click a higher nr n:th top-level item sibling. I.e. if my first click expanded top-level menu item nr 4, it is ok to click and expand any of top-level items nr 1 to 3 (li n=1 to li n=3), but if I click li n=3 as my first click and then click li n=4 as my second click, then the mobile menu closes. The same is valid if I open li n=2 as my first click and any of li n=3 or li n=4 as my second click, then it closes, BUT NOT if I click li n=1 as my second click, then it stays open. But after that, since I now am in li n=1, it means I only have higher nth li to choose from, so it closes again.
It is a bit concerning that the nav is JS functionality instead of pure CSS, because there are so many more potential problems with JS over pure CSS. It could be done in CSS having the parent:active trigger the slide out of the sub menu I’m imagining, especially if you could loop through the menu items. Maybe a starting point for inspiration could be Kevin Powells Youtube vid on pure CSS responsive menus from a while back.
It doesn’t matter in which order I click, which parent menu item I click, whether one or more are already open… as far as I see, everything works as it should
OK I understand our difference of perception
I had not set open/close icons!
With icons activated, everything is fine when using the icons
But… when clicking or pressing the label, still broken:
with ‘#’ link, first time actually opens submenu, second time follows the ‘#’ link, so shutdowns the whole menu
with empty link, open works but not close (or you have to use the icon)
with non empty link, I don’t care, I never do this (see note 2 below)
So I think you should check if empty link or ‘#’ and in these cases, act only like open/close.
NOTE: For accessibility, I think empty link shouldn’t be used at all because the TAB key will skip the menu entry, so it’s not even possible to access the dropdown with keyboard on desktop, or you have to set attribute tabindex=0 on parent item but it’s a bit annoying.
NOTE 2: I actually NEVER, EVER, set a parent menu entry as a link. This is so terrible, and not only for accessibilty. If a dropdown opens on hover, people won’t notice that the parent label is also a link and will miss it. I always set ‘#’ link and if I need a link for top level item (to parent page or whatever), I put it at first entry in the dropdown.
Oh and final NOTE: Please automatically close previously opened submenu when opening a new one. This is also a terrible experience on mobile when everything stays open.
@yankiara interesting. Is there an option to close the submenu? That would help to keep the final bottom item disappear under the GUI of the iPhone Safari on iOS 15. I agree on the thing about closing one sub-menu when opening another, otherwise it becomes a mess!
@timmse Funny thing now that you guys fixed in the mobile, it still behaves the same in Chrome Dev Tools (Version 105.0.5195.125 (Official build) (arm64) when selecting a mobile device agent. See https://rodrigo-staging.ekomod.se
