Jump Menu

Problem

When placed on top of the page, an extensive LINEARIZE MENU will fill all the available space of the screen. However, generally, you do not want the menu to take precedence over the content.

Solution

Place the menu at the bottom of the page but display a button on top of the page that links to the menu.

A navigation menu with an extensive list of items can fill the entire screen when the page loads, relegating the content to second place. However, it is usually a good practice to emphasize content over navigation 1. This pattern tries to overcome this problem by focusing on the content while still providing quick access to the navigation. For that, you design a LINEARIZED MENU that is positioned at the bottom of the page while leaving a button on top that takes the user to the menu. Besides the button on top, it is helpful to provide a link next to the menu to take users back to the top, so they do not need to scroll the entire page if they need to go back.

Since the JUMP MENU only uses a normal HTML anchor and there is no JavaScritp required, it is extremely simple to implement and probably will work with almost all browsers and devices.

The jump to the footer can be disorienting because the screen abruptly changes from one state to another without much feedback of what happened. You can decrease the problem caused by the sudden jump by using an animation that scrolls through the entire page until the menu. However, depending on the length of the page and how the animation is done, you can be unnecessarily delaying the access of the user to the menu. Moreover, this type of animations can be sluggish on slower devices.

***

Web Design Patterns for Mobile Devices
Unicef Sweden, 04/2012
Web Design Patterns for Mobile Devices
Content Magazine, 04/2012
Web Design Patterns for Mobile Devices
Bagcheck, 04/2012
Web Design Patterns for Mobile Devices
Kiskolabs, 04/2012
Web Design Patterns for Mobile Devices
Bearded, 04/2012
Web Design Patterns for Mobile Devices
Momentum>, 06/2012

  1. Wroblewski, Luke. Mobile First. New York: A Book Apart, 2011.