Multi level navigation pattern for responsive design
One of the biggest challenges facing web designers in the age of responsive design is how to deal with complex navigation menus. One issue we’ve come across several times recently has been how to deal with multi level menus when the top level pages also include valuable content. I am going to demonstrate the problem and our approach to solving it, but would be interested to hear your thoughts on this solution.
We’ve read a lot of articles on good practice in responsive design patterns, but none seem to cover this particular issue. This article by Michael Mesker shows an alternative approach, which we think is a good option, but we were looking for a way for all navigation to be located in a single place and for all the content to remain accessible.
The dim and distant past
In the era of desktop only design it was easy to deal with a tiered navigation system. Either allow a user to click and explore, or provide fly out menus to allow them to jump deeper into the site if they wanted.
Making menus ready for mobile
When adapting menus for responsive websites, we tend towards the menu toggle method, as we believe this is the most flexible approach.
To allow users to access the subpages within a section, we create an accordion menu within the fly out navigation menu that allows the user to open the section they’re interested in and choose a subsection if required. The question we have often struggled with, illustrated in the visual below - what if a user wants to access the ‘Section 5’ page instead of one of its subpages? A click on Section 5 opens the accordion menu to reveal the subpages.
The approach we have settled on is to have the first click on a menu button triggers the dropdown, and if the user makes a second click on the ‘Section 5’ button, they get taken to that particular page. (The only way the user has to close an open accordion item is to click on one of the other ‘parent’ sections.)
We prompt the user about this change in behaviour on the button by changing the icon from pointing down (to illustrate the menu will slide) to pointing right (to hinting that the button will now take you somewhere else).
One of the reasons we thought this was logical was due to the way touch devices default to handling hover states. In a fly out menu the first click on a button will invoke the hover state, and the second click will activate the link as expected.
This is one of I’m sure many different ways to solve this problem. I’d be interested in hearing about other approaches.