Advertisement
HTML/CSS

Foundation for Beginners: Navigation

by

One of the most important aspects of a front-end framework is how it handles navigation. In this part of Foundation for Beginners, we'll take a look at several forms of navigation, along with some JavaScript tools which add extra flourish. I’ll also introduce you to another helpful tool which will help you to become a better Foundation developer.


The Section Plugin

One of Foundation's best JavaScript offerings comes in the form of Section; a plugin for building several forms of navigation, such as accordions, tabs, vertical and horizontal navigation.

foundation-3-section-1
foundation-3-section

Here's some example markup:

<div class="section-container auto" data-section>
  <section>
    <p class="title" data-section-title><a href="#">Section 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#">Section 2</a></p>
    <div class="content" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

This may look a bit more complex than what we've previously covered, so let me break it down for you.

Any section you create, no matter whether it's an accordion, or tabs, or even a nav bar, starts with a div using the section-container class followed by the auto class. On that same div add an empty data-section attribute. This attribute dictates what kind of section we're dealing with, by default Foundation assumes we want an accordion. To use a particular type of section, simply change the auto class to tabs, accordion, vertical-nav or horizontal-nav. Finally, add that very same class as the data-section attribute's value. This will ensure you are displaying the correct type of section for your needs.

Once the wrapper has been setup, we can add some content. For every section in your wrapper you will need a title and to link that title to the content:

<section>
    <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
</section>

We can see here that each section is wrapped in a <section> tag (which makes things easy, although you could use a div). Inside each of these sections we have a <p> tag with a class of title which encloses the link to the corresponding section. Below the paragraph tag is the div which holds the content for the section; this has a class of content. Duplicating the code above will create each of your sections inside your section wrapper.

Note: Adding the vertical-nav class will display a vertical navigation on large screens, but will switch to an accordion when on small screens. Adding horizontal-nav will evoke the same behavior.

Deep Linking

Let’s say you want to link to the second section of your section wrapper, but when you open the page it shows the first section by default. Fear not! Foundation has a built in solution in the form of Deep Linking. To get this to work we need to add a new attribute to our wrapper: data-options=”deep_linking:true”. This tells Foundation that when a user visits a url with a fragment identifier such as this “http://www.website.com/#section3”, it should load the page with that section showing.

foundation-3-deep-link
<div class="section-container auto" data-section data-options="deep_linking: true">
  <section>
    <p class="title" data-section-title><a href="#section1">Section 1</a></p>
    <div class="content" data-slug="section1" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#section2">Section 2</a></p>
    <div class="content" data-slug="section2" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

As you can see, we have added the deep linking data option and also added the data-slug attribute to the content div. This data slug instructs Foundation which section to display on page load.


Side Nav

Foundation's Side Nav (a simple way to display vertical menus) goes hand in hand with sections. The HTML structure is very simple and allows for dividers where necessary. Let’s look at the markup.

<ul class="side-nav">
  <li class="active"><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li class="divider"></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

This is a standard unordered list, comprising list items containing links to.. well whatever you want. Adding the side-nav class to the <ul> sets everything up, whilst the active class can be used to show which link is currently in use. If you need to divide up your list items, add an empty list item with a class of divider. Easy.

foundation-3-4

Sub Nav

Foundation's Sub Nav tends to be used for things such as filtering content. The markup is as straight-forward as Side Nav, but differs in that it uses a description list instead of an unordered list. This gives you the option of using a term along with your description tags which hold your links. There are no dividers in the Sub Nav but you can still make use of the active class. Here’s the markup:

<dl class="sub-nav">
  <dt>Filter:</dt>
  <dd class="active"><a href="#">All</a></dd>
  <dd><a href="#">Photos</a></dd>
  <dd><a href="#">Videos</a></dd>
  <dd><a href="#">Music</a></dd>
</dl>
foundation-3-5

Pagination

Pagination is also a form of navigation; in fact, pagination should really be contained within a <nav> element. Let's have a look at the markup of some pagination links in Foundation:

<ul class="pagination">
  <li class="arrow unavailable"><a href="">&laquo;</a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="unavailable"><a href="">&hellip;</a></li>
  <li><a href="">12</a></li>
  <li><a href="">13</a></li>
  <li class="arrow"><a href="">&raquo;</a></li>
</ul>

Kicking your list items off should be an arrow, which requires the class arrow. You may want to use either &laquo; or &lsaquo; or maybe even &larr;. Take a look at unicode-table.com for more examples you could use.

The Pagination navigation type allows us to state classes unavailable and current, with the latter being very similar to the active class that we went over previously. You may also want to add an arrow to your last list item, this time using either &raquo; or &rsaquo;, or maybe even &rarr;.

As this is simple markup adding it to a content management system such as Wordpress is fairly easy.

foundation-3-pagination

Bonus: You could center the Pagination by wrapping the ul tag in a nav with the pagination-centered class. As with all Foundation elements, pagination is responsive and easy to style.


Useful Tool

Using a responsive framework such as Foundation is a rapid way to get your project looking great on all devices, but testing is still a chore. To ease that pain I've create a tool called Respondr, allowing you to add a url to a smartphone, tablet and desktop giving you the chance to catch any issues quickly and easily.

foundation-3-7

Coming up Next

So far we've covered the grid system, block grids, the Orbit slider plugin, the section plugin and three types of navigation. Next time we’ll focus on the Top Bar plugin, breadcrumbs and yet another useful tool.

Related Posts
  • 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
    Case Studies
    How They Did It: Typekit's New HomepageTypekit retina
    Typekit recently redesigned their homepage with some new services in mind. When Typekit joined Adobe, they set out to bring us a new way to handle fonts on the web. Not only did they create a fairly simple way to embed fonts on the web, but they have now officially launched a desktop sync option, which allows Creative Cloud subscribers to sync fonts to their computer directly from Typekit. This has been in a beta form for a while now, and provides a much easier route to local fonts than finding them elsewhere!Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Theme Development
    How to Integrate Bootstrap Navbar Into WordPress ThemeBootstrapd 400
    Have you ever wanted to speed-up the process of theme development? I assume the answer is "yes" and you already know about Bootstrap and use it in mock-ups for development. This raises the question: "How can you integrate Bootstrap components into a WordPress theme?"Read More…
  • Web Design
    HTML/CSS
    How to Customize the Foundation 4 Top BarFoundation preview
    Zurb's Foundation 4 features a brilliant top bar which has become almost symbolic of a Foundation site build. Today we're going to look at how you can implement it in a different way, placing it elsewhere on the page, giving you a custom and responsive horizontal navigation menu.Read More…