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