Menus for Touch-Screen Tablets

A couple of months back I bought a Kindle Fire HD 8.9. I just wanted to replace my old Kindle 2 e-reader, didn't really want a tablet computer. Wow! What a beautiful device! And it's the cheapest e-reader on the market with an incredible color screen. It turns out, as long as you don't load it up with 4G and extra memory, it's also one of the cheapest tablets on the market with an incredible, high-resolution color screen. But when I tested it on my web site, the menus didn't work at all well.

Since touch-screens don't have a mouse cursor, there is no hover to open the menus, so the user needs to touch the menu to open it. Unfortunately, I had coded the drop-down and fly-right menus with hyperlink destinations of their own, as in the following code:

  1. <li><a class ="dropdown" href="http://www.jldoty.com">Item 3 longer</a>
  2.  <ul>
  3.   <li><a class="flyright" href="http://www.jldoty.com">Item 3.1</a>
  4.    <ul>
  5.     <li><a href="http://www.jldoty.com">Item 3.1.1</a></li>
  6.     <li><a href="http://www.jldoty.com">Item 3.1.2</a></li>
  7.     <li><a href="http://www.jldoty.com">Item 3.1.3 longer</a></li>
  8.     <li><a href="http://www.jldoty.com">Item 3.1.4</a></li>
  9.    </ul>
  10.   </li>
  11.  </ul>
  12. </li>

This is the "Item 3 longer" drop-down and the "Item 3.1" fly-right menu in the horizontal menu. Notice the "href=" destination in the drop-down and fly-right menus on lines 1 and 3.

On a computer with a mouse, when the cursor hovers over the drop-down or fly-right items, the submenu is displayed. On the other hand, while hovering, if the user clicks on the drop-down or fly-right menu, they're taken to my home page.

On a tablet, since there is no cursor that can hover, the drop-down and fly-right menus aren't exposed until the user taps them, which is, for all intents and purposes, a mouse click. And while this initiates exposure of the submenu, it also causes the view to immediately jump to my home page, so the user never has a chance to click on any submenu items.

The solution is rather simple: just replace the hyperlink destinations in all drop-down and fly-right menu items with "#". Here's the same code, but fixed to work on a tablet:

  1. <li><a class ="dropdown" href="#">Item 3 longer</a>
  2.  <ul>
  3.   <li><a class="flyright" href="#">Item 3.1</a>
  4.    <ul>
  5.     <li><a href="http://www.jldoty.com">Item 3.1.1</a></li>
  6.     <li><a href="http://www.jldoty.com">Item 3.1.2</a></li>
  7.     <li><a href="http://www.jldoty.com">Item 3.1.3 longer</a></li>
  8.     <li><a href="http://www.jldoty.com">Item 3.1.4</a></li>
  9.    </ul>
  10.   </li>
  11.  </ul>
  12. </li>

 

Here is the final example page from the Animation Tutorials, but with the horizontal menu modified to work on touch-screen tablets. Note that in this example the vertical menu on the left has not been properly modified.