Latest web development tutorials

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