Hover dropdown menu on touchscreens

Design help General
1

Hi,

I’m trying to do a header menu that is similar to stripe’s menu: https://stripe.com/

But I can’t seem to get my dropdown menu to work on hover. I have a touchscreen pc and apparently this is not working correctly.

Has anyone managed to get a dropdown menu to work on touchscreens and if so how. I’ve been struggling on this for hours now.

I also tried to do this without using a dropdown item but a simple div bloc that shows using interactions another div block on hover but the issue is that the sub menu disapears as soon as I hover out of the menu item itself I would like the sub menu to stay visible when it is hovered on.

Would really appreciate some help here/

2

Here’s a test project I made to show you the two cases;

http://breadcrumb-cca.webflow.io/header-menu

the shareable link is here: https://preview.webflow.com/preview/breadcrumb-cca?preview=726612009dae253a1d80d77fd3a7fb3f

3

Your 2 hovers work for me, on a laptop.

There’s no real concept of hover on touchscreen… at best it’s one tap for the hover and a second tap for a click, it’s not really a great experience.

4

I’m not using a tablet I’m using a PC that has a touchscreen but I’m still using a mouse.
And the hover with the mouse does not work on the dropdown.
All other hovers work for example the hover state of a button works.

5

That’s odd. I don’t think I have ever seen one type of hover working and not another. You’re on Chrome? Would you mind trying to download Chrome Canary and try from there?

6

Doesn’t work either in Chrome Canary and Firefox.

It only works in Edge

7

After discussions with webflow’s support it seems this is not supported at the moment.

Our developper has coded this piece of JS and it works great for those who are interested;

8 
<script type="text/javascript">
$('.w-dropdown').hover(function(evt)
{
evt.preventDefault();

var openClass = 'w--open';
var $view = $(this);
if (evt.type == 'mouseenter')

{ $view.find('.w-dropdown-toggle').addClass(openClass); $view.find('.w-dropdown-list').addClass(openClass); }
else if (evt.type == 'mouseleave')

{ $view.find('.w-dropdown-toggle').removeClass(openClass); $view.find('.w-dropdown-list').removeClass(openClass); }
});
</script>
9

hmm, not working for me on Chrome or Firefox, are we sure this works? :slight_smile:

10

ok, changed it a bit as $view wasn’t working quite right, replacement below:

$('.w-dropdown').hover(function(evt) {
	evt.preventDefault();
	var openClass = 'w--open';
	if (evt.type == 'mouseenter') { 
		$(this).find('.w-dropdown-toggle').addClass(openClass); 
		$(this).find('.w-dropdown-list').addClass(openClass); 
	}
	else if (evt.type == 'mouseleave') { 
		$(this).find('.w-dropdown-toggle').removeClass(openClass); 
		$(this).find('.w-dropdown-list').removeClass(openClass); 
	}
});

now is working on Firefox and Chrome on my DellXPS13 and SurfacePro laptops.

2 Likes
11

Just inserted this code at the bottom of the body section (custom code) and it worked perfectly. Thank you!

12

Hello, where do you place this piece of code?
Cant get it to work.

Thanks

13

I placed it in the footer of the website in the custom code section:

image
image851×96 4.54 KB

14

hmm me to, but it still does´nt work…
https://preview.webflow.com/preview/wexo2018?preview=6747bf140b9894cefdc99e452764357a

its the topemenu topic called “service”… any idea?

Kim

15

Hum actually my developper changed the code and made something custom calling our servers so I couldn’t help. Perhaps, @jenkinstechnology could help.

16

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.