We’re using a JavaScript drop down menu - specifically the ‘Deluxe Menu’ and it displays poorly on mobile devices. Instead of being an actual drop down menu, it displays the drop down straight-away over the top of the main page elements. Is there any way to fix this? Any help is very appreciated!
I am not intimately familiar with ‘Deluxe Menu’ but it sounds like the BLOCK elements used in the menu are too large for the restricted screen real estate in a mobile device. Is there a CSS file associated with ‘Deluxe Menu’? I suspect you can modify the dimensions of the elements
Without a little more detail - HTML, CSS, Link to your working site - no one can help you with this. All we can do is guess and suppose.
jQuery is murder on mobiles. Unless “mobile” means a certain version of iThings and a certain version of a little green robot.
Would recommend anything else. Specifically, I would recommend NO dropdown menus at all. Not every mobile (most mobiles??) do touch events, which is something to consider when users have no :hover (or :focus) capabilities. I would seriously consider a function like isMedia() on a one-line script checking the capabilities of the browser and whether it deals with @ media queries and whether the screen is wider than a mouseturn and THEN (and only then) having that isMedia() function call a larger dropdown menu script. By isMedia I’m referring to something like https://gist.github.com/08602e7d2ee448be834c (though I’ve had trouble using it to load a library like jQuery… it seems jQuery really likes to already be on the page before the load event, possibly due to browsers not all setting the same “flag” or whatever after load… but then, there’s also Respond.js which aims to do similar).
http://stephanierieger.com/a-plea-for-progressive-enhancement/ <— read this, the folks at Yiibu know their stuff