# 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> ``` ### 实例解析 在 &lt;div&gt; 元素上添加 `data-magellan-expedition="fixed"` 属性来创建麦哲伦导航。 然后在 `&lt;dd&gt;` 或 `&lt;li&gt;` 上添加 `data-magellan-arrival="_value_"` 属性，后面添加一个与该属性值一样的链接(page1)。 使用 `data-magellan-destination="value"` 属性来控制麦哲伦导航的目标, 后面紧跟的 `&lt;a&gt;` 元素添加 `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> ... ``` ## 麦哲伦导航内边距 默认情况下，麦哲伦导航的 `&lt;div&gt;` 元素有 10px 的内边距。可以使用 CSS 移除它： ### 实例 ``` [data-magellan-expedition], [data-magellan-expedition-clone] {     padding: 0; } ``` ## 麦哲伦导航选项 使用 data-options 属性修改麦哲伦导航的设置, 例如 `&lt;div data-magellan-expedition="fixed" data-options="destination_threshold:60"&gt;`: | 名称 | 类型 | 默认 | 描述 | 实例 | | --- | --- | --- | --- | --- | | active_class | string | active | 指定激活链接的类 | | threshold | number | 0 | 指定导航在什么时候需要固定位置。会根据滚动条滚动计算，默认为 0 (auto)。 | | destination_threshold | number | 20 | 设该值设定了导航链接显示为激活（蓝色背景）时导航列表距离顶部的值。 | | fixed_top | number | 0 | 指定了导航条距离头部的像素值 |