User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm currently working on a site with a quite complex information architecture. The IA has 3 levels and each level can have up to 12 items.
On desktop, I'm using a mega dropdown (e.g. Mashable) and I need to adapt this for smaller screens and mobiles. I'm exploring concepts at the moment and have found this example: Multi-Level Push Menu
How would you solve this problem and what pattern would you use?
Another pattern to consider is a multi-step toggle, as illustrated here: http://codepen.io/bradfrost/full/qwJvF from the excellent This is Responsive resource. Another interesting idea is to skip the subnav entirely.
I've been trying to keep tabs on this problem too, so perhaps these will be relevant to you:
Really, whatever you choose should be informed by usability testing/hallway testing/whatever you can afford to do.
A parting thought: "Obvious always wins."
jazZRo took the words off my keyboard. I was going to suggest looking at what Mashable do in a responsive view to see what their solution is.
I have recently spotted a clever alternative that Apple (http://www.apple.com/) have done - note you should open this on a mobile device to view it properly - where they still keep all the top level items but you can rotate through them all without having to re-structure the nav.
As an alternative to the high level, the site for the Rugby world cup uses a collapsible sidebar (Microsoft Azure uses this for their navigation where each item opens another item next to it)
I think their argument would fall under the lines of when a user is focusing on the nav, the rest of the page becomes less important.
