CODEWITHSUNDEEP
jqueryhtmlcssmobile
L_Holcombe
L_Holcombe

Reputation: 389

Dropdown navigation on mobile devices

My company develops sites using a proprietary CMS, and our ability to adapt to mobile development is pretty bad. We develop mobile-specific sites, but we don't give them away for free. Anyway, most of our sites use horizontal navigation with unordered lists, where the child menu appears when the parent item is hovered on. Which is fine on desktop devices, but doesn't work on mobile browsers. The child menus appear, but they function as if they were transparent with clicks on child items going nowhere - or worse, going to links behind the child menus.

I was able to write a short jQuery script (I'm a beginner with jQuery) that forces the child menu to stay visible if the parent link is clicked. It works, but not on the first click - on the first click, the browser tries to initiate mobile hovering emulation (?) and flashes the child menu on the screen for an instant. Then a second click will open the child menu, and at that point the child menu is fully functional, or can be closed by clicking elsewhere. This is clearly not ideal.

Here's the jQuery script. If the a element has the .dropper class, it will have a ul as its next sibling, so that's how the selector works.

$(function() {
     $('a.dropper').click(function(){
          $(this).next().toggle();
     });
});

Hopefully somebody knows a method by which I can get these menus working for both desktop and mobile browsers using the same HTML and CSS. Unfortunately, media queries might not be possible to implement in our system. Obviously, I'd rather get away from this kind of navigation, and design more responsively, but that's another problem for another day.

I've been using Chrome on a recent Android device as my mobile test environment, but any solution ought to work on an iPhone as well.

Upvotes: 0

Views: 344

Answers (1)

leeand00
leeand00

Reputation: 26382

Media Queries might not be the right idea anyway. What's better is to detect the device on the server side and then return a different version of the content tailored to mobile. It's also easier to start with mobile first if you have that option. Media Queries are kind of strange in that mobile browsers will load all of the content and thus make a slow-to-load, expensive-to-load site, since it will be loading all the content that it would for a desktop site (which would be much larger, but formatting that content for the smaller screen.

Media queries are more about sizing a site to different devices or different sized browser windows...and not so much about preventing too much content from being loaded to a device...that's what user agent detection is for.

Upvotes: 1

Related Questions