8.22.1. How to create Magellan Navigation ¶

Magellan navigation is a navigation index, which is created as follows:

<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>

8.22.2. Case analysis ¶

Add on the < div > element data-magellan-expedition="fixed" Property to create Magellan navigation.

And then in <dd> Or <li> Add on data-magellan-arrival="value" Property, followed by a link (page1) that is the same as the property value.

Use data-magellan-destination="value" Property to control the target of Magellan navigation, followed by the <a> Element addition name="value" Property. The values of both properties must be the same as the data-magellan-arrival The values of the page1 ).

Finally, initialize the Foundation JS, and the navigation automatically switches according to what is currently displayed when the user scrolls the page.

8.22.3. Magellan Navigation head Toolbar ¶

Magellan navigation uses an example of the head toolbar:

<div data-magellan-expedition="fixed">
  <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>
...

8.22.4. Magellan navigation inner margin ¶

By default, Magellan navigates <div> The element has the inner margin of 10px. You can remove it using CSS:

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

8.22.5. Magellan navigation options ¶

Use the data-options property to modify Magellan navigation settings, such as <div data-magellan-expedition="fixed" data-options="destination_threshold:60"> :