The best Foundation Magellan (Magellan) navigation Tutorial In 2024, In this tutorial you can learn How to create a Magellan navigation,Magellan Navigation Toolbar head,Magellan Navigation Padding,Magellan navigation options,
Magellan Navigation is a navigation index is created as follows:
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 using examples:
By default, the Magellan navigation <div>
element has padding of 10px. CSS can be used to remove it:
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 |