CODEWITHSUNDEEP
ipaddrop-down-menu
realph
realph

Reputation: 4671

Dropdown Menu on iPad

I'm using CSS for a dropdown menu on a site I'm building. When you hover over a parent tab, the dropdown menu fades in using CSS3's transition-property. The problem I'm having is the parent tab links off to another page, so when you tap a parent tab on the iPad, it takes you to the page instead of displaying the dropdown menu - which causes usability issues.

Is there a way to make it so the dropdown appears on the first tap, and the second tap takes you to the parent page?

Here's the HTML I'm using to display the menu:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="http://www.apple.com">Team</a>
      <ul>
        <li><a href="http://www.apple.com">Our Workers</a></li>
        <li><a href="http://www.apple.com">Join Us</a></li>
      </ul>
     </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

And here's a jsFiddle link: http://jsfiddle.net/A64QU/197/

Thanks in advance, I appreciate any help. ​

Upvotes: 1

Views: 1948

Answers (2)

waded
waded

Reputation: 78

You're on the right track with a design that invokes the menu on the first tap and the parent page on the second tap. This will work on touchscreen-only or touchscreen-sometimes devices where the user cannot always 'hover', and is critical for users who have difficulty holding the cursor steady over the menu, so I recommend it over a hover-to-show-menu design regardless of whether this is Mobile Safari, Internet Explorer, or any other browser.

To do what you ask, handle the click event on the <a> tags (for example use jQuery: http://api.jquery.com/click/) and hide/show the menu that way (you could use jQuery's toggle, or show/hide.) Then extend the code to consider whether the menu is shown or hidden to determine whether it should prevent <a> tag's default behavior and show the menu (for example jQuery's preventDefault: http://api.jquery.com/event.preventDefault/) or allow the default behavior of click on <a> to occur: navigate to the <a href> URL.

Consider that with this approach you may also need to provide a way for the user to dismiss the menu once it's open (and blocking some part of the page.) Often this is done with a click handler at the document level.

I do not recommend trying to implement a touch-hold instead, as this is not well-known to users. In my experience with user testing most will not try this, even on things that look as if they are a menu.

Upvotes: 2

Tim
Tim

Reputation: 8921

There is no "hover" in the touch UI metaphor, although there is a counterpart event which has been called touchhold in the jQuery Mobile UI; it is fired when the finger remains pressed down on the touch-screen for a certain amount of time, e.g. 500ms, 700ms, whatever. Something similar happens on the virtual keypad of the iPad when you hold a finger down on certain keys, the [a] key, for example: you get a popup of variant forms of [a] (umlauted, accented, and so forth).

You could wire things up so the menu-open code would be called on touchhold rather than on the tap event, and then have the individual menu-items listen for the tap event. You would either have to override the touchevents of Mobile Safari yourself by writing the required javascript, or install a UI library that implements this behavior.

Upvotes: 0

Related Questions