HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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 |