CSS dropdowns on touch-based clients. Are pure CSS dropdowns going to become extinct?

Question

My company is starting to move toward adding the iPad as a browser i have to test my work on. This got me thinking...

Since touch-based clients don't have a :hover state are pure CSS dropdowns going to go away?

Then i thought even if you add some javascript to make the menus popup on click... What happens when the menu item (that expands to another menu) is also a link. How do you tell the difference between a click to see the menu or a click to go to that link?

What's going to happen with dropdown menus when touch based clients become more ubiquitous? Are there any workarounds out there yet?

Answer 1

This is kind of a design issue forced by a technical issue. I'd probably redesign/reorganize my content into one of three ways:

1- Click-activated mega-menus (example). The downfall here is that you might have real estate issues.

2- Top-Level Category links that lead to Navigation Pages. The downfall here is that it requires an extra page load to get to the content.

3- Make each Menu Item consist of two buttons, one to navigate to the page (the text) and one to expand the child menu (an arrow.) You'd still need, though, to provide the child navigation, if present, on the page the user goes to when they click a menu item.

Answer 2

my nav bar has this functionality (collins.class401.com/nav) for the crap you need its a modified version of TJK_DropDownMenu http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp their version (and mine) uses visibility for :hover their version also only supports having <a>'s as menu items, while mine also supports <span>s (though using spans breaks their keyboard navigation) if you want something like a form, or a button in your menu, like i have their version usually works for :hover on ipod touch, as long as you click in the 'white space' my version is much more friendly to touch devices, and has the clickable arrows to toggle the display using prototype.js,

or, if they can't hover, and javascript is off, setting a php session and reloading the page, then inserting a style to the style tag at the end of the page which will overwrite the visibility and display according to whether the clicked to show or hide