Toggle dropdown menu – HTML & CSS – SitePoint Forums


On the mobile version of a website called 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 displayed 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 that’s the menu you’re using. In their examples they use 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 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 need to have this close icon in every panel, but you can hide it using hover media queries for hover devices.

However, please check your documentation first to see if there is an easier option.:slight_smile:


Comments are closed.