Responsive Navigation: Toggle Patterns – New on Premium

Welcome to the third in a Premium series which looks at responsive navigation patterns. This tutorial will walk you through three patterns where navigation is toggled on and off to conserve space at the top of the page. It’s time to stop copying and pasting – check out today’s Premium tutorial and start understanding!

Become a Tuts+ Premium member to gain access to the whole tutorial, as well as hundreds of other advanced videos, tutorials, and courses.

The Patterns

The three patterns we’ll develop here take one of the footer patterns as their cue. If you remember, the footer anchor pattern placed the navigation at the bottom of the page and used a button at the top to quickly get to it. The downside with that pattern is your visitors jump suddenly from the top of the page to the bottom, possibly disorienting them.

The toggle patterns we’ll look at today aim to correct the downside of the footer anchor pattern. Once again we’ll start with a button to toggle the menu on and off, but we’ll eliminate the jump by opening and closing the navigation in place.

The patterns we’ll develop in this article are:

• Toggle — The menu opens by clicking a button and closes by clicking anything off the menu
• Multi-Toggle — Adds an accordion submenu to the basic toggle pattern
• Toggle & Slide — Slides the submenu into place from off screen

Tuts+ Premium

The recently re-launched Tuts+ Premium is a service that provides top-tier training in a variety of creative fields. Whether you prefer books, visual training, or in depth tutorials, we have you covered. While we unfortunately can’t afford to provide the service for free, it’s only $19 a month – less than you’d spend on dinner.

We hope you’ll consider checking it out! In addition to learning a huge variety of new skills, it’s also a fantastic way to say thank you to Webdesigntuts+.