What is a good alternative to drop-down menus for site navigation on touch-screen/mobile devices?

Question

We're in the process of redesigning our website, and one of the design goals is to make the site more mobile/tablet friendly.

Our current site is very large, and the navigation is somewhat complicated. Right now our main navigation is divided into 8 drop-down menus that expand when the mouse hovers over them. Each menu has 5-10 items in it.

When we redesign the site, we will likely have a similar number of navigation items, although they may be organized differently. However I don't think it would be desirable to retain the existing navigation format. "Hovering" can be problematic on touch-screen devices, and the long horizontal nav bar from which the menus drop down would have to be very small to fit horizontally on a smart-phone screen. On the other hand, a simple list of links or buttons is also undesirable because there would be way too many without a way to hide or expand/collapse them.

It is also our intention to use responsive design (using CSS media queries) to adapt our site to both desktop and mobile browsers, so a solution that could use shared code for both environments is ideal. I'm trying to avoid having separate "desktop" and "mobile" sites.

I have a few ideas about how we can handle this, but I'm not sure I like any of my ideas. So my question is what is a good touch-screen-friendly and mobile-friendly alternative to pull-down menus for sites with complicated navigation? Examples of sites that implement such navigation methods well would also be very much appreciated.

Answer 1

Gracefully degrade your subnavigation or drop it by reiterating its contents on the index pages.
It's true. Just look at the evidence below. Two great examples of responsive web design are Smashing Magazine and The Boston Globe. Ethan Marcotte himself was involved in the Boston Globe redesign.

Smashing Magazine: Drop the Subnav
Note in these screenshots as we progress from desktop to mobile form factors, the "subnav" disappears completely. It is always reiterated inline on the page, so is technically redundant. Consider moving your subnavigations to your index pages.

Desktop Form Factor

Tablet(ish) Form Factor

Mobile Form Factor

The Boston Globe: Degrade Subnavigation

Note that in this example, the Boston Globe navigation goes from a robust, awesome-on-desktop mega-subnavigation, to a more subdued subnav on the tablet form factor. Also note that it goes from rollover (only possible with a mouse pointer), to expand-on-click (necessary for touch devices). The navigation further collapses on mobile.

Also note that the items in the subnavigation are also present inline on the index page. In this case, News breaks down into Nation, Politics, etc. You can find those in the mega-subnav as well as on the page.

Desktop Form Factor

Tablet(ish) Form Factor

Tablet(ish) Form Factor (navigation expanded)

Mobile Form Factor