Side Menu

Problem

Although vertical menus side by side with the main content are fairly common, they are almost impossible to achieve on a mobile device. It would not be efficient to reserve an entire column on a small screen just for the menu. Nonetheless, you may still want to get a similar look.

Solution

Design the menu bonded together to one side of the page, but positioned outside the page. Then, provide a button that will show the menu by sliding it in, sliding out the content.

Vertical navigation placed side by side with the page’s main content is a quite common pattern on websites. On mobile, that type of navigation is not practical because horizontal space is limited, but this pattern allows us to achieve a comparable layout on both versions. Like the TOGGLE MENU this pattern allows us to focus on the content while providing quick access to the navigation.

The idea of this pattern was first formulated as a pattern by Frost 1 as The Left Nav Flyout, and consists of a button on top of the page that allows users to toggle the visibility of a hidden menu. When that button is tapped it reveals the menu on one of the side of the screen by pushing the main content out of the screen. You should keep a small portion of the page to give some affordance of how the menu works. Additionally, you can display an animation of the menu moving to show users what is happening. Like in the JUMP MENU, an abrupt change of the context can disorient the user.

***

Web Design Patterns for Mobile Devices
Barack Obama, 04/2012
Web Design Patterns for Mobile Devices
Facebook, you need to be logged in to access view this pattern, 04/2012
Web Design Patterns for Mobile Devices
Kettle, 04/2012