Putting navigation at bottom

There are several advantages by putting the navigation at the bottom.

1. There is one copy of the navigation. One copy mean no repeat on the HTML means a little bit faster. And easier to manage.

2. No javascript, no even css, required. This method is supported by HTML natively because it is just anchor hash link. We don't even need css and javascript make it works.

3. The menu is revealed after clicking the menu button, anyway. Whether we hide the navigation on the left slide-in pane, at the top or at the bottom. Its the same that we hide the navigation at the beginning and reveal the links after clicking the button.

4. Ensuring we have some links at the footer. Having links at the footer allows reader to have something to navigate after finish reading your page.

 <header id='top'>
   <h1>Demo on footer navigation strategy</h1>
 </header>
 <nav>
   <ul class='small-block-grid-4 hide-for-small-only'>
     <li><a href='#'>Home</a></li>
     <li><a href='#'>About</a></li>
     <li><a href='#'>Works</a></li>
     <li><a href='#'>Contact</a></li>
  </ul>
  <p class='show-for-small-only'><a href='#footer-nav'>Menu</a></p>
</nav>
<article>
  <p>A long text here.</p>
</article>
<footer>
  <nav id='footer-nav'>
    <ul>
      <li><a href='#top'>Top</a></li>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>About</a></li>
      <li><a href='#'>Works</a></li>
      <li><a href='#'>Contact</a></li>
    </ul>
  </nav>
</footer>

What’s next? We’re going to take a look at “Building our own grid system”.