May 04, 2021 Foundation5
1. Foundation Magellan navigation
2. How to create Magellan navigation
3. Magellan navigates the head toolbar
Magellan Navigation is a navigation index that is created as follows:
Add
data-magellan-expedition="fixed"
to the element to create Magellan navigation.
Then add the
data-magellan-arrival="
value
"
property on the
<dd>
or
<li>
and then add a link (page1) with the same property value.
Use
data-magellan-destination="value"
the target of Magellan's navigation, followed by the
<a>
name="
value
"
The values of both properties must
data-magellan-arrival
(page1).
Finally, initialize Foundation JS, and the user navigates as they scroll through the page, automatically switching based on what is currently displayed.
Magellan Navigation uses header toolbar examples:
By default, magellan
<div>
10px inner margin for the element.
You can use CSS to remove it:
Use the data-options property to modify the settings for Magellan navigation, for example,
<div data-magellan-expedition="fixed" data-options="destination_threshold:60">
:
| Name | Type | Default | Describe | Instance |
|---|---|---|---|---|
| active_class | string | active | Specifies the class that activates the link | Give it a try |
| threshold | number | 0 | Specify when navigation needs to be fixed. Scrolls based on the scroll bar, which defaults to 0 (auto). | Give it a try |
| destination_threshold | number | 20 | Set this value to set the value at the top of the navigation list when the navigation link is displayed as activated (blue background). | Give it a try |
| fixed_top | number | 0 | Specifies the pixel value of the navigation bar from the head | Give it a try |