Footer Anchor Pattern

This pattern attempts to solve the problem of needing to scroll to the bottom of the page to access the menu. It provides an anchor link in the form of a button at the top of the page, which will take you directly to the navigation.

Unfortunately the pattern creates an additional problem while solving the first. Because the anchor link jumps you from the top to the bottom of the page, it can be disorienting for people who may not realize what happened.

The HTML

Here's the html used to create the navigation. It's identical to the html used in the footer variation pattern.

<nav>
  <ul id="demo-nav">
    <li><a href="">Back to Post</a></li>
    <li class="current"><a href="footer-only.html">Footer Only</a></li>
    <li><a href="footer-adapt.html">Footer Variation</a></li>
    <li><a href="footer-anchor.html">Footer Anchor</a></li>
    <li><a href="footer-fixed.html">Footer Fixed</a></li>
  </ul>
</nav>
			

I've also added a link at the top of the page which will get styled as a button

<a class="anchor" href="#demo-nav">Menu</a>
			

The Default CSS

Here's the css that loads by default. It too is identical to the footer variation pattern with the exception of the styles foe the anchor button.

.anchor {
  float: right;
  margin-top: 1.25em;
  display: block;
  padding: 0.25em 2%;
  color: #fff;
  text-decoration: none;
  border-radius: 0.25em;
  background-color: #5b5756;
  background-image: -webkit-linear-gradient(top, #6b6766, #5b5756);
  background-image: -moz-linear-gradient(top, #6b6766, #5b5756);
  background-image: -ms-linear-gradient(top, #6b6766, #5b5756);
  background-image: -o-linear-gradient(top, #6b6766, #5b5756);
}
	
.anchor:hover {
  background-color: #7b7776;
  background-image: -webkit-linear-gradient(top, #8b8786, #7b7776);
  background-image: -moz-linear-gradient(top, #8b8786, #7b7776);
  background-image: -ms-linear-gradient(top, #8b8786, #7b7776);
  background-image: -o-linear-gradient(top, #8b8786, #7b7776);
}

nav {
  border-top: 1px solid #878382;
}

footer {
  clear:both;
  background: #373332;
  color: #a7a3a2;
  width: 100%;
  border-top: 1px solid #878382;
  padding-bottom: 1em;
 }
	
.credit {
  font-size: 0.875em;
  float: left;
  padding: 0.5em 0;
}
		
.credit a {
  color: #578b9c;
  font-style: italic;
}
	
.credit a:hover {color: #97cbdc;}


#demo-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
	
#demo-nav li {
  border: solid #878382;
  border-width: 0 0 1px 0;
}
	
#demo-nav li.current a {color: #9b9796;}
#demo-nav li.current a:hover {color: #111;}

#demo-nav a {
  color:#fff;
  padding: 0.75em 5%;
  text-decoration: none;
  display: block;
  background-color: #575352;
  background-image: -webkit-linear-gradient(top, #777372, #676362);
  background-image: -moz-linear-gradient(top, #777372, #676362);
  background-image: -ms-linear-gradient(top, #777372, #676362);
  background-image: -o-linear-gradient(top, #777372, #676362);
}
	
#demo-nav a:hover {
  background-color: #777372;
  background-image: -webkit-linear-gradient(top, #878382, #777372);
  background-image: -moz-linear-gradient(top, #878382, #777372);
  background-image: -ms-linear-gradient(top, #878382, #777372);
  background-image: -o-linear-gradient(top, #878382, #777372);
  color: #111;
}
			

The CSS in Media Queries

Here's the css that loads in the media queries. It's also identical to the footer variation pattern with one exception. At 64em we turn the anchor button off by setting it's display to none.

@media screen and (min-width: 42.5em) {
  #demo-nav {
    padding: 1.5em 0;
    background: #474342;
    overflow: hidden;
  }
		
  #demo-nav li {border: 0;}
		
  #demo-nav a {
    padding: 0.75em 0 0.75em 5%;
    float: left;
    background-color: transparent;
    background-image: none;
    border-width: 0;
  }
		
  #demo-nav a:hover {
    background-color: transparent;
    background-image: none;			
  }
}

@media screen and (min-width: 56em) {
  #demo-nav a {padding: 0.75em 1.5em 0.75em 5%;}
}

@media screen and (min-width: 64em) {
  .anchor {display: none;}

  footer .credit {
    padding: 0.75em 0;
  }
	
  nav {
    position: absolute;
    top: 0;
    right: 5%;
    background: none;
    border: 0;
  }
	
  #demo-nav {
    background: transparent;
    border: 0;
    padding: 1em 0;
  }

  #demo-nav li {
    display: inline;
  }
		
  #demo-nav a {
    padding: 0.5em 1em;
    background-color: transparent;
    background-image: none;
  }
		
  #demo-nav a:hover {
    background: transparent;
    color: #777
  }
		
  #demo-nav li.current a:hover {color: #777;}
  #demo-nav li:last-child a {padding-right: 0;}	
}

@media screen and (min-width: 75em) {
  #demo-nav a {padding: 0.5em 1.75em;}
}

@media screen and (min-width: 80em) {
  #demo-nav {a {padding: 0.5em 2.1em;}
}

@media screen and (min-width: 90em) {
  #demo-nav a {padding: 0.5em 2.5em;}
}
			

Tips

This pattern does a good job using vertical space. It also provides access to the main navigation at both the top and bottom of the pages on small screens.

The main downside to this pattern is the jump from top to bottom to access the navigation. One way to help alleviate this is to provide a back to top link near the navigation. This will help signal the location on the page and provide an easy way back to the top.