blocktopmenu in moblie click 2 times, why?

[Rafa TTT]

Can I change for mobile version and only need 1 click for enter in category? remember only happens in mobile version

Anyone can help me?

 

Thanks

Edited March 17, 2020 by Rafa TTT (see edit history)

[Rafa TTT]

any?

[Luis C]

Hi Rafa:

FIrst of all, can you tell me what version of Prestashop and Blocktopmenu module are you using? A link to the site where the behavior can be reproduced would be also appreciated.

I'm going to assume you're using Prestashop 1.6.X and the most recent update to blocktopmenu.

Since I'm not familiar with this issue I'm going to play a guess game. I think the issue here lies in the way touchscreen devices handle hover and touch interaction. In order to replicate hover states in touchscreen devices some systems use javascript/jquery to enable a two-tap behavior. First tap triggers hover, and second tap triggers callback/function/link.

I'd just add an eventlistener to your menu list items to inmediatly trigger the dropdown, or add an "expand/collapse" Icon to each of your list elements and trigger the dropdown from there. You can do this by simply adding a floated element within each list item, putting an icon inside them, and assigning a function via jquery. Then simply hide the icons from plain view using CSS. Optionally, you can also condition your jQuery code to window width (to be called only on smaller screens/resolutions) or touchscreen devices.

 

In the CSS code you can hide your expand/collapse icon using a media query to detect both the absence of HOVER STATE and the presence of a coarse pointing device or absence of pointing device:

.yourcontainerclass {display:none;}

@media (hover:none) and (pointer: coarse) {
.yourcontainerclass {display:inline-block}
}

This probably makes no sense whatsoever to you (or anyone else) If so, please let me know, I'll try to explain myself better.