There are a lot of ways to handle navigation in general, because “best practices” for mobile are still being sorted out. There isn’t a one-size-fits-all solution because everyone has different needs for their site, and their menus are organized differently.
I recently had the opportunity to participate in a DrupalEasy podcast this week about designing and implementing mobile-friendly navigation. We discussed a handful of the options I outlined in my previous mobile menu blog post, but a few other strategies surfaced that I wanted to share.
- The DHTML module. Be sure that if you are using this module that you’ve really thought through the options on what to do with parent links. You can find the options at /admin/config/user-interface/dhtml_menu which cover a variety of ways to handle those links. As far as UX goes, the "None"option is probably best. Meaning that pages that contain child links are not actually pages, rather they are just "containers" for the child links, or a means to organize and sort your menu tree of options. This is not ideal for everyone, but if you find yourself struggling to fill those parent pages with content and you wind up just describing the child pages -- this can be a great option.
- If the parent pages on your site do hold real content, you could create a hybrid version of the accordion menu that allows users to both hit parent pages and reveal child links. This method is outlined nicely here - however I encourage lots of testing with this method since it appears that the JS loading the expand link was a bit slow on my phone.
- Print the menu twice, create a anchor link at the top that jumps users to the bottom where the menu is. With this method, you can use menu blocks set to show children menu items when a user is on the parent page. This can mean less scrolling past dozens of children menu options, but it also means that users have to click on a parent page to see the other child links for that page.
- Transform a list of links into a select menu for small screens. This avoids the problems the top nav approach presents and is a clever way to save real estate. There is a Drupal module called tinynav.js that does this. Note that if you have a huge menu tree, this can create an overwhelming sea of links for users. This method also makes it harder to see the hierarchy of the links.
Above all else, remember not to treat your mobile users like they are less deserving of your content than the desktop users. Don't hide content or make menus difficult to use, and be sure to test any solution on a myriad of actual mobile devices.
Additional Resources
Responsive Design: Mobile Menu Options
[video] 7 Deadly Myths of Mobile
Free Drupal Whitepaper | The Mobile Web and Drupal