I hope that I am not sounding behind the times here, but I had some time to check out the iPad for an extended length of time (before I would just look a web sites to make sure that they worked), and I noticed that accessing the drop down menus for the navigation is near impossible. Do to the fact that here’s now way to hover over a link and have the drop-down menu appear (that I know of at least).
So my question is, how do I make my drop-down menu accessible on touch screen devices? Such as the tablets and smart phones
I don’t have much respect for drop downs anyhow, so I always make sure that there are other ways to reach the pages. So, the top link always links to a page, and on that page there are links to all the other pages that don’t depend on the drop down. That’s probably a better way to structure a site anyway.
So my question is, how do I make my drop-down menu accessible on touch screen devices? Such as the tablets and smart phones
You don’t, because you can’t. Not directly anyway.
What you can do is have another way to access the same information, such as a sitemap-style link users can click on to reach a page which basically contains all the same links as your dropdown.
You might also want to see if, with CSS media queries, you can only introduce the dropdown CSS on screens above a certain size (though this DOES assume larger screens != touchscreen, which is the case mostly today but may not be in the future… also assumes devices and browsers understand media queries and they may not). If you can get something like that working then the single HTML menu can be an open list on smaller screens and a dropdown on larger screens… again, this only works on assumption that small screens might touch and large ones never do.
So I like the additional link before or after the menu better. I would agree with ralph about dropdowns not being all that great in the first place, but I’ve built them before because clients have demanded them, so I know how that is.
In my dropdowns, they are built assuming users might be using IE6 without Javascript. So they can click on the main-level links and will be brought to a page with all the submenu’s links in the page. Users with mice and IE6+Javascript (as IE6 does not support :hover on li elements) may never see those pages because they can go directly to the submenu, so they do.
Always nice to have some redundancy in stuff like navigation.
As a side note, there is Touch events being introduced in Javascript… but I don’t even see the point when my boss’ phone is running Windows Mobile and therefore IE6 as the main browser. Meh.