On the mobile version of a web site called www.diprolab.cl I have got a list of product’s categories. When touching on category it is display the underlying sub-categories and .sub-sub-categories. I would like that by touching the top category’s name again hiding what was shown previously.
In that sample I am seeing “Articulos de aseos” and its categories but I can’t hide it again .
That’s not going to be easy unless the menu you are using has this functionality built in from the start. I suggest you refer to the documentation for that mega menu to see if they have something built in from the start. It may have a js over-ride built in.
The problem is that the menu is working on hover and mobiles can emulate hover to a small degree but once touched the element just stays there and won’t hide until you touch somewhere else.
Generally these days I would prefer click only menus rather than hover menus and avoid the issue altogether. I see you reference YAMM in the code so I wonder if this is the menu you are using. In their examples they are using click actions even for 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 it you have to hover so hover rules are always active and interfere. You would need to remove all the hover rules first (for touch devices only) and then add a click routine just for touch devices. That’s why these things need to be in-built from the start and why I suggest checking the documentation to see if there is something already in place.
The only quick fix I can offer is that you add a ‘close panel’ anchor in each of the opened panels and then touch devices can click this button to close the screen. It could be as simple as <a href="#">Close Panel</a> and you can place it somewhere obvious. It just means that when you touch the button the hover effect is gone from the original item and the menu closes.
Of course you have to have that close icon in every panel but you could hide it using the hover media queries for hover devices.
However please check your documentation first to see if there isn’t an easier option.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
