prevent hover-click on multilevel menu on touch devices

[bernhard]

i'm currently porting a clients website from joomla to processwire (finally, it's a good week ) and we are using the old design for that. today i recognized that on tablets the menu doesn't work as expected, since the menu structure changed from joomla-chaos to pw-awesomeness

the problem is the old multilevel problem when you have items and subitems and want to show the subitems on hover. on touch devices your clients will perform a "click" anstead of a "hover" and they will trigger a new pageload.

i came up with a quick fix and would be interested in your opinions. seems to work really nice here:

$(document).ready(function () {
    var menu = $('...');
    menu.find('a').click(function(e) {
        console.log('clicked');
        // early return if the parent has no hover-class
        if(!$('...').hasClass('...')) return;

        // prevent click when delay is too small
        var delay = Date.now() - $(this).data('hovered');
        if(delay < 100) e.preventDefault();
    });
    menu.find('a').mouseover(function(e) {
        var time = Date.now();
        $(this).data('hovered', time);
    });
});

 

[szabesz]

Interesting Do you think people will figure out how to use the menu?

[bernhard]

i find it really intuitive. it looks a bit clumsy on my screencast because of the mouse but it feels different when you are touching and not pointing. i'll send you the link so you can try yourself

[gebeer]

Interesting solution, indeed. But it feels a bit hacky. I'd rather present a different menu layout to mobile devices as to avoid the hover problem in the first place. Something like off canvas or the likes.

[ro-bo]

Hi Bernhard,

read and try his: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

In the lower section of this page you can download this code doubletaptogo.

I use this code in almost every project where a flyout navigation occurs.

Robert

[tpr]

DoubleTagToGo is interesting, thanks.. It could be easily rewritten to a non-jQuery version (at least by first look on the code). Downloading jQuery on mobile is too much, especially for users with limited bandwidth (err, for me for example )

[ro-bo]

Hi tpr,
 

... Downloading jQuery on mobile is too much ...

The actual JQuery version has 94,8 KB. I think that shouldn't be a problem today (pictures are usually much larger). Only an inefficient way of using JQuery could be a problem in some cases...

Robert

[tpr]

On mobile I'm on a plan of 200 Mb per month so 94.8 KB is a bit steep.

[LostKobrakai]

Especially as e.g. zepto will give you probably 99% of what you're using of jquery in a fraction of the filesize. 

[bernhard]

Hi Bernhard,

read and try his: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

In the lower section of this page you can download this code doubletaptogo.

I use this code in almost every project where a flyout navigation occurs.

Robert

thank you robert. the demo does not work for me as expected. when i click on "blog" and then on "work" it fires the click and not the dropdown...

On mobile I'm on a plan of 200 Mb per month so 94.8 KB is a bit steep.

Especially as e.g. zepto will give you probably 99% of what you're using of jquery in a fraction of the filesize. 

looks nice, thank you

you can try my menu on https://new.mentalestaerke.at/ as long as the page is there. would be nice to hear if it works for you or you have any problems. (you need the desktop version of the menu)

[Robin S]

On 31/05/2016 at 8:02 AM, bernhard said:

i came up with a quick fix and would be interested in your opinions. seems to work really nice here:

https://gitlab.com/snippets/20195

Just used this snippet - really great solution!

[bernhard]

just for reference, i'm using a different approach on another project now: 

 

[bernhard]

On 31.5.2016 at 6:31 AM, gebeer said:

Interesting solution, indeed. But it feels a bit hacky. I'd rather present a different menu layout to mobile devices as to avoid the hover problem in the first place. Something like off canvas or the likes.

Sorry for my delay

The problem is that the touch device I am talking about is my Laptop with a standard sized screen Somehow this device behaves a little different than a regular non-touch device and it does not trigger hover actions even when a mouse is connected. Also here in the forum I have to click twice for the like-button...