Foundation Magellan Navigation

How to Create Magellan Navigation

Magellan Navigation is a navigation index, created as follows:

Example

<div data-magellan-expedition="fixed">  
  <dl class="sub-nav">    
    <dd data-magellan-arrival="page1"><a href="#page1">Page 1</a></dd>    
    <dd data-magellan-arrival="page2"><a href="#page2">Page 2</a></dd>  
  </dl>
</div>
<h3 data-magellan-destination="page1">Page1</h3>
<a name="page1"></a>...
<h3 data-magellan-destination="page2">Page2</h3>
<a name="page2"></a>...
<!-- Initialize Foundation JS -->
<script>
  $(document).ready(function() {    
    $(document).foundation();
  });
</script>

Example Analysis

Add the data-magellan-expedition="fixed" attribute to the <div> element to create Magellan Navigation.

Then add the data-magellan-arrival=" attribute on <dd> or <li>, followed by a link with the same value (e.g., page1).

Use the data-magellan-destination="value" attribute to control the target of Magellan Navigation, followed by an <a> element with the name=" attribute. Both attribute values must match the value of data-magellan-arrival (page1).

Finally, initialize Foundation JS, and the navigation will automatically switch based on the content currently displayed as the user scrolls.

Magellan Navigation Top Bar

Magellan Navigation using a top bar example:

Example

<div data-magellan-expedition="fixed">  
  &lt;nav class="top-bar" data-topbar>    
    ...    
    <section class="top-bar-section">      
      <ul class="left">        
        <li data-magellan-arrival="page1"><a href="#page1">Page 1</a></li>        
        <li data-magellan-arrival="page2"><a href="#page2">Page 2</a></li>      
      </ul>    
    </section>  
  </nav>
</div>
<h3 data-magellan-destination="page1">Page1</h3>
<a name="page1"></a>...
<h3 data-magellan-destination="page2">Page2</h3>
<a name="page2"></a>...

Magellan Navigation Padding

By default, the <div> element of Magellan Navigation has 10px padding. You can remove it using CSS:

Example

[data-magellan-expedition], [data-magellan-expedition-clone] {
  padding: 0;
}

Magellan Navigation Options

Modify Magellan Navigation settings using the data-options attribute, for example, <div data-magellan-expedition="fixed" data-options="destination_threshold:60">: