Hi WDF,

 

I've got a submenu that is visible on hover and I'm wondering what's the best practise to make this usable on mobile devices?

 

I could use media queries to display it if width < x but as mobile screen sizes grow and grow, it could get to a point where you could be on a mobile device with a desktop resolution so the media query wouldn't work.

 

I could also use detect what browser they're on but again, this isn't bulletproof. A new device could come out with a new browser that I've not accounted for and again it wouldn't display.

 

So what've you done in this situation?

 

It's probably not an option to just have it displayed always, even on desktop.

 

Cheers,

~evu.

You just need to make sure that the sub menu is activated when it's parent has focus.

Hi BD,

 

How does that work? The sub menu handle is a link in itself, so clicking that would just load that page.

 

I'm surprised I can't seem to find the answer on Google :/

 

Cheers,

~evu.

Well, I figured it out. I hope.

 

//if touch enabled, add "touch" class to html tag
function isTouchDevice(){
if (typeof(window.ontouchstart) != 'undefined') {
 $('html').addClass('touch');
}
}
//run touch test
isTouchDevice();

 

So, if it's a touch enabled device, all you have to do is preceed the associated styles with ".touch".

 

Super small and super easy

 

Shame I don't have a lot of devices to test on but so far on S3 and Iphone 4 it works.

 

~evu.

Edited October 2, 201213 yr by evu