Foundation Magellan (Magellan) navigation
How to create a Magellan navigation
Magellan Navigation is a navigation index is created as follows:
Examples
<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"
Examples of analytical
On the <div> element to add data-magellan-expedition="fixed" " property to create Magellan Navigation.
Then <dd> or <li> Add the data-magellan-arrival=" value " " attribute, and add a back link as the attribute value (page1).
Using data-magellan-destination="value" " attribute to control the Magellan navigation target, followed by the <a> elements add name=" value " attribute. Two value of the property must be data-magellan-arrival consistent values (page1).
Finally, the initialization Foundation JS, user navigation while scrolling the page will automatically switch based on the content currently displayed.
Magellan Navigation Toolbar head
Magellan Navigation Toolbar head using examples:
Examples
<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"
Magellan Navigation Padding
By default, the Magellan navigation <div> element has padding of 10px. CSS can be used to remove it:
Magellan navigation options
Using data-options modify the attributes of Magellan navigation settings, such as <div data-magellan-expedition="fixed" data-options="destination_threshold:60"> :
| name | Types of | default | description | Examples |
|---|---|---|---|---|
| active_class | string | active | Class specifies the activation link | try it |
| threshold | number | 0 | Specify at what time the navigation needs a fixed position. Will be calculated according to the scroll bar, the default is 0 (auto). | try it |
| destination_threshold | number | 20 | The set value is set to display the value of the navigation links to navigate from the top of the list is active (blue background) when. | try it |
| fixed_top | number | 0 | Specifies the pixel values from the navigation bar head | try it |