Foundation

Magellan

Building navigation is a necessity, but it isn't always as helpful as it could be. With Magellan, people will know exactly where they are as they scroll the page.

Using Magellan

The first thing you'll want to do is setup all the destinations that Magellan should keep track of on the page. You can do this using data-magellan-destination attributes like so:

Note: Each destination needs to have a unique name.


<div data-magellan-destination='fiji'>
  <p>When this is in view the Fiji arrival will be notified.</p>
</div>

<div data-magellan-destination='bahamas'>
  <p>When this is in view the Bahamas arrival will be notified.</p>
</div>

<div data-magellan-destination='hawaii'>
  <p>When this is in view the Hawaii arrival will be notified.</p>
</div>

Now create a container with the data-magellan-expedition attribute. Inside of this container will need to create navigation items with a data-magellan-arrival attribute like so:


<ul data-magellan-expedition>
  <li data-magellan-arrival='fiji'>Fiji</li>
  <li data-magellan-arrival='bahamas'>Bahamas</li>
  <li data-magellan-arrival='hawaii'>Hawaii</li>
</ul>

Magellan will notify any matching data-magellan-arrival attribute when you have approached a particular destination defined earlier. The default behavior is to apply an "active" class to this element.

If you want your data-magellan-expedition element to remain at the top of the page (like it does on this page) instead of scrolling off the page use the "fixed" option like so:


<ul data-magellan-expedition='fixed'>
  <li data-magellan-arrival='fiji'>Fiji</li>
  <li data-magellan-arrival='bahamas'>Bahamas</li>
  <li data-magellan-arrival='hawaii'>Hawaii</li>
</ul>

Options

You can change the following options on data-magellan-expedition elements:

Name Default Description
data-magellan-active-class active The class to be added to the data-magellan-arrival element.

Events

The following events are available and can be bound to:

Event Description
magellan.arrival Fired on data-magellan-arrival elements when they become active.

A Clear View

We designed a new lightbox plugin that makes it super easy to create awesome image galleries. Our markup is easy to use and gets out of the way!
Learn about Clearing »

Grab the copy of Foundation best for you, whether that's Scss or CSS, everything or just bits and pieces.

Install Foundation

Awesome product jobs:
via ZURBjobs