Foundation Magellan Navigation
How to create Magellan navigation
Magellan navigation is a navigation index, created as follows:
Example
<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>
Try it Yourself »
Example analysis
Add on the <div> elementdata-magellan-expedition="fixed"attributes to create Magellan navigation.
then in<dd>or<li>add todata-magellan-arrival="value"Add an attribute, followed by a link (page1) with the same value as that attribute.
Usagedata-magellan-destination="value"The attribute controls the target of Magellan navigation, followed immediately by the<a>Adding Elementsname="value"attributes. The values of the two attributes must be consistent withdata-magellan-arrivalthe value is consistent (page1)。
Finally, initialize Foundation JS, and the navigation will automatically switch based on the currently displayed content when the user scrolls the page.
Magellan navigation header toolbar
Magellan Navigation using header toolbar example:
Example
<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>
...
Try it Yourself »
Magellan navigation padding
By default, the Magellan navigation's<div>element has 10px padding. You can remove it with CSS:
Example
padding: 0;
}
Try it Yourself »
Magellan Navigation options
Use the data-options attribute to modify Magellan navigation settings, for example:<div data-magellan-expedition="fixed" data-options="destination_threshold:60">:
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
| active_class | string | active | Specify the active link class | Try it Yourself |
| threshold | number | 0 | Specify when the navigation needs to be fixed in position. It is calculated based on scrolling, and defaults to 0 (auto). | Try it Yourself |
| destination_threshold | number | 20 | This value sets the distance of the navigation list from the top when the navigation link is shown as active (blue background). | Try it Yourself |
| fixed_top | number | 0 | Specifies the pixel value of the navigation bar from the top. | Try it Yourself |