Dropdown menu code needed for web versions

Question

I have a site where in the top header area I have a dropdown which only works when the user hovers the mouse over it (http://liquor.com). But in mobile versions I've been informed this behaviour won't work.

So I'll put a conditional statement in the code and display another dropdown menu, but I'm curious what code should be used for a mobile dropdown.

Any help would be greatly appreciated.

Answer 1

You could try this: http://css-tricks.com/unobtrusive-page-changer/

Answer 2

Because mobile platforms cannot :hover, you have to bind the dropdown menu to click events instead.

Basically follow this procedure to create a dropdown menu:

• Capture the click event for top-row navigation links (because users cannot hover)
• Prevent default (browser loading new page)
• Load appropriate submenu depending on which top-nav link was clicked.
• Remove submenu when it loses focus (user clicks on page or other top-nav-link)

Answer 3

I have pure CSS (no javascript at all) 2-level drop-down menus that work on at least the iPod touch, iPhone, and iPad.

All that was required was to add a dummy onclick handler, so

<li><div class="menuheader">Reports</div>
... </li>

became

<li><div class="menuheader" onclick="void(0)">Reports</div>
... </li>

This was described in Apple's Safari Reference Library entry for Making Elements Clickable.