Foundation 麦哲伦（Magellan）导航

如何创建麦哲伦导航

麦哲伦导航就是一个导航索引，创建方式如下:

实例

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

尝试一下 »

实例解析

在 <div> 元素上添加 data-magellan-expedition="fixed" 属性来创建麦哲伦导航。

然后在 <dd> 或 <li> 上添加 data-magellan-arrival="value" 属性，后面添加一个与该属性值一样的链接(page1)。

使用 data-magellan-destination="value" 属性来控制麦哲伦导航的目标, 后面紧跟的 <a> 元素添加 name="value" 属性。两个属性的值必须与 data-magellan-arrival 的值一致 (page1)。

最后，初始化 Foundation JS ，用户在滚动页面时导航就会根据当前显示的内容自动切换。

麦哲伦导航头部工具条

麦哲伦导航使用头部工具条实例：

实例

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

尝试一下 »

麦哲伦导航内边距

默认情况下，麦哲伦导航的 <div> 元素有 10px 的内边距。可以使用 CSS 移除它：

实例

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

尝试一下 »

麦哲伦导航选项

使用 data-options 属性修改麦哲伦导航的设置, 例如 <div data-magellan-expedition="fixed" data-options="destination_threshold:60">:

名称 类型 默认 描述 实例
active_class string active 指定激活链接的类 尝试一下
threshold number 0 指定导航在什么时候需要固定位置。会根据滚动条滚动计算，默认为 0 (auto)。 尝试一下
destination_threshold number 20 设该值设定了导航链接显示为激活（蓝色背景）时导航列表距离顶部的值。 尝试一下
fixed_top number 0 指定了导航条距离头部的像素值 尝试一下