Responsive Web Design

WIDTH = px

NAVIGATION: The Show/Hide Toggle

This is an example from Ethan Marcotte's book RESPONSIVE DESIGN: PATTERNS & PRINCIPLES (A BOOK APART book № 15).

The Show/Hide Toggle is one of the most common ways of handling complex navigation systems in a responsive design: when the menu doesn't fit, conceal it. This pattern requires two elements at minimum: the navigation, which is concealed at certain breakpoints; and a "trigger" element, which the user interacts with to reveal the navigation.

Resize browser viewport to experiment how menu is shown and hidden at breakpoint (600px). Here's a real world example for you: ABOUT Ethan Marcotte open_in_new