8.22.1. How to create Magellan Navigation ¶
Magellan navigation is a navigation index, which is created as follows:Example ¶
8.22.2. Case analysis ¶
Add on the < div > element data-magellan-expedition="fixed" Property to create Magellan navigation.
And then in Or Add on data-magellan-arrival="value" Property, followed by a link (page1) that is the same as the property value.
Use Finally, initialize the Foundation JS, and the navigation automatically switches according to what is currently displayed when the user scrolls the page. Magellan navigation uses an example of the head toolbar: By default, Magellan navigates Use the data-options property to modify Magellan navigation settings, such as data-magellan-destination="value" Property to control the target of Magellan navigation, followed by the Element addition name="value" Property. The values of both properties must be the same as the data-magellan-arrival The values of the page1 ). 8.22.3. Magellan Navigation head Toolbar ¶
Example ¶
<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
1a>li>
<li data-magellan-arrival="page2"><a href="#page2">Page
2a>li>
ul>
section>
nav>
div>
<h3 data-magellan-destination="page1">Page1h3>
<a name="page1">a>
...
<h3 data-magellan-destination="page2">Page2h3>
<a name="page2">a>
...
8.22.4. Magellan navigation inner margin ¶
The element has the inner margin of 10px. You can remove it using CSS: Example ¶
[data-magellan-expedition], [data-magellan-expedition-clone]{
padding:0;
}
8.22.5. Magellan navigation options ¶
data-magellan-expedition="fixed" data-options="destination_threshold:60"> :