html – Dropdown menu code needed for web versions – Education Career Blog

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.

,

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.

,

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

,

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)

Leave a Comment