Foundation Magellan


May 04, 2021 12:00 Foundation5


Table of contents


Foundation Magellan navigation


How to create Magellan navigation

Magellan Navigation is a navigation index that is created as follows:

Instance

< div data-magellan-expedition= "fixed" >
< 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 out . . .

Instance resolution

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 navigates the head toolbar

Magellan Navigation uses header toolbar examples:

Instance

< 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 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 out . . .

Magellan navigates the margins

By default, magellan <div> 10px inner margin for the element. You can use CSS to remove it:

Instance

[data-magellan-expedition], [data-magellan-expedition-clone] {
padding: 0;
}

Try it out . . .

Magellan navigation options

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