# 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 | 指定了導航條距離頭部的像素值 |