Skip to main content

Blog Post

Responsive Design: Mobile Menu Options

At various Omega presentations I've given at Drupalcamps and in blog posts I've written, people have asked me about responsive menu options. Brad Frost has outlined some great options for responsive menus, and I'd encourage you to do your research since it's a always a good idea to review what your options are before deciding on a particular path. I will say that using browscap to hide/show your menu(s) is not recommended or necessary since browser sniffing is not very reliable, hence the whole movement toward responsive design.

Since I'm now theming primarily with Omega, I typically style the menu links to be finger-friendly for mobile, and then I'll add styles to that same menu to put it back into a normal menu bar shape for desktop. Then I'll add a "menu link" block that displays only for mobile users (the default.css Omega stylesheet has this block set to display:none;). This link uses a bit of jQuery to hide and show the menu items (to save on space).

Check out this year's Drupalcamp Atlanta site to see the jquery mobile menu in action.

Since I've used this method 2 or 3 times now for different sites, my co-worker Kevin turned it into a module, and the sandbox version is on Drupal.org. So check out the Mobile Menu Toggle module, maybe it will save you a bit of time. Please provide feedback (or report issues if there are any)!

If you are using OM Maximenu, those can be a bit unruly so you could use a separate menu for mobile. Or you can use Menu Blocks to help you build both the mobile menu and the MaxiMenu off of the same menu tree like Primary Links, which would be ideal. Thanks to Danté for that tip!

Just create your Primary Menu structure first, and then create separate menu blocks for use in the maximenu structure. You can import the primary menu links using the import tab on the MaxiMenu admin page. Then save yourself time by adding all the children via menu blocks. You'd likely set these menu blocks to only begin displaying at the secondary menu level and show all the children. Then create another menu block just for mobile users, which only displays the children menu items when you are on their parent page, like this. Note, that example just uses anchors to jump to the menu at the bottom instead of hiding it. 

Hope some of this has been helpful, and thanks to Brad Frost for his thorough coverage on all the different options out there! It's really a case-by-case issue, where you must determine which solution works best for your website needs.

Additional Resources
Going Mobile with Drupal | Mediacurrent Blog Post

Responsive Design + Drupal | Mediacurrent Blog Post