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.
All that was required was to add a dummy
onclick handler, so
<li><div class="menuheader">Reports</div> ... </li>
<li><div class="menuheader" onclick="void(0)">Reports</div> ... </li>
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)