On the mobile version of a website called www.diprolab.cl I have a list of product categories. When you tap on a category, the underlying subcategories and sub-subcategories are displayed. I would like that touching the top category name again hides what was shown previously.
In this sample I see “Articulos de aseos” and its categories but I can’t hide it anymore.
This won’t be easy unless the menu you’re using has this functionality built in from the start. I suggest you refer to the documentation for this mega menu to see if they have something built in from the start. It can have an integrated js over-ride.
The problem is that the menu works on hover and mobiles can emulate hover to a small extent, but once touched the item stays there and doesn’t hide until you touch somewhere else.
Generally these days I’d rather click only menus rather than hover menus and avoid the problem altogether. I see you refer to YAMM in the code so I’m wondering if this is the menu you use. In their examples, they use click actions even for the desktop, which is much more usable.
The full answer would be to only have hover styles for devices that support hover and add click routines for everything else. At the moment it becomes difficult to add a click function to the hover menu because to click on it you have to hover so that the hover rules are still active and interfering. First you need to remove all hover rules (for touch devices only) and then add a click routine only for touch devices. That’s why these things need to be built in from the start, and why I suggest checking the documentation to see if there’s anything in place already.
The only quick fix I have can offer is that you add a “close panel” anchor in each of the open panels, then touch devices can click that button to close the screen. It could be as simple as
Close Panel and you can place it in an obvious place. It just means that when you touch the button, the hover effect disappears from the original element and the menu closes.
Of course, you must have this close icon in every panel, but you can hide it using the hover over media queries for hovering devices.
However, please check your documentation first to see if there is an easier option.