Advertisement
HTML/CSS

Examining Responsive Navigation: Footer Patterns – New on Premium

by

Welcome to the second in a Premium series which looks at responsive navigation patterns. This article will walk you through four patterns where navigation moves to the footer, conserving 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

With the three header patterns in the previous tutorial our main concern was space, specifically vertical space and how not to use too much of it. You want visitors to see your content as soon as possible and they can't do that if the navigation is taking up the entire screen. One way we can solve this problem is to move the navigation to the footer.

That opens up another set of challenges. While visitors will more easily get to the content, they'll now have to scroll to the bottom of the page to discover the navigation.

The patterns we'll develop in this article are:

  • Footer only — keeps the menu in the footer at all times.
  • Footer only variation — keeps the menu in the footer on small screens, but moves it to the header once space allows.
  • Footer anchor — keeps the menu in the footer on small screens, but provides a link (button) to it at the top of the page.
  • Footer fixed — keeps the menu in the footer on small screens and introduces fixed positioning so it remains visible.

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+.

Related Posts
  • Web Design
    Complete Websites
    Design a Travel Startup Landing Page Using PhotoshopLanding thumb
    In this tutorial I’ll walk you through a process of creating a simple and clean travel startup landing page design. I'll be using Photoshop CS6 to design a professional and lightweight layout combining beautiful imagery and some stylish fonts.Read More…
  • Code
    WordPress
    The Beginner's Guide to Selecting a WordPress ThemeBeginnersguide
    When you're first starting out with your site or blog, it's easy to rush into things because of the desire to get things up and running as quickly as possible. In some cases, that works fine, in others it's not always the best idea. And in this case, it's the latter.Read More…
  • Web Design
    HTML/CSS
    Build a Top Bar Off-Canvas Navigation With Foundation 5Foundation menu
    Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users. Read More…
  • Web Design
    HTML/CSS
    Examining Responsive Navigation: Off Canvas PatternsNav patterns preview
    This is the final part in a Premium series about responsive navigation patterns. But here's the bonus: this one's freely available for everyone! In this tutorial we'll walk through four variations of patterns where navigation and page content is placed off canvas to conserve space until requested. It's time to stop copying and pasting, let's start understanding!Read More…
  • Web Design
    HTML/CSS
    Responsive Navigation: Toggle Patterns - New on PremiumNav patterns preview
    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!Read More…
  • Web Design
    HTML/CSS
    Examining Responsive Navigation Patterns - New on PremiumPreview
    As web designers create more and more responsive sites, patterns continually emerge for how we handle global navigation. This is the first in a series of posts focused on how to develop some of those patterns. It's time to stop copying and pasting - check out today's Premium tutorial and start understanding!Read More…