简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

目錄搜尋

Foundation 基础 Foundation 教程 Foundation 安装 Foundation 按钮 Foundation 按钮组 Foundation 标签 Foundation 表单 Foundation 表格 Foundation 侧边栏 Foundation 顶部导航栏 Foundation 分页 Foundation 滑动导航 Foundation 滑块 Foundation 价格表 Foundation 进度条 Foundation 均衡器(Equalizer) Foundation 开关 Foundation 列表 Foundation 麦哲伦（Magellan）导航 Foundation Joyride Foundation 面板 Foundation 模态框 Foundation 输入框尺寸 Foundation 提示框 Foundation 提醒框 Foundation 图标 Foundation 图片 Foundation 文本 Foundation 下拉菜单 Foundation 选项卡 Foundation 折叠列表 Foundation 手册 Foundation CSS 参考手册 Foundation CSS 可见性 Foundation 图标参考手册 Foundation 网格 Foundation 块状网格 Foundation 网格 - 大型设备 Foundation 网格 - 水平堆叠 Foundation 网格 - 小型设备 Foundation 网格 - 中型设备 Foundation 网格实例 Foundation 网格系统

文字

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	指定了导航条距离头部的像素值	实例预览

关于我们联系我们留言板

手册网