使用Magellan導(dǎo)航頭部工具條

Magellan導(dǎo)航可以和頭部工具條結(jié)合使用，實(shí)現(xiàn)更靈活的導(dǎo)航效果。使用頭部工具條的方法如下：

lt;div data-magellan-expedition"fixed"gt;
    lt;nav class"top-bar" data-topbargt;
        lt;section class"top-bar-section"gt;
            lt;ul class"left"gt;
                lt;li data-magellan-arrival"page1"gt;lt;a href"#page1"gt;Page 1lt;/agt;lt;/ligt;
                lt;li data-magellan-arrival"page2"gt;lt;a href"#page2"gt;Page 2lt;/agt;lt;/ligt;
            lt;/ulgt;
        lt;/sectiongt;
    lt;/navgt;
lt;/divgt;

在上面的代碼中，我們將Magellan導(dǎo)航和Foundation的頭部工具條結(jié)合起來(lái)。只需按照上述步驟創(chuàng)建Magellan導(dǎo)航，并將導(dǎo)航項(xiàng)添加到頭部工具條的

中即可。

修改Magellan導(dǎo)航的內(nèi)邊距

默認(rèn)情況下，Magellan導(dǎo)航的

元素有10px的內(nèi)邊距。如果需要移除這個(gè)內(nèi)邊距，可以使用以下CSS代碼：

[data-magellan-expedition], [data-magellan-expedition-clone] {
    padding: 0;
}

通過(guò)以上CSS代碼，可以將Magellan導(dǎo)航的內(nèi)邊距設(shè)為0。

使用data-options屬性修改Magellan導(dǎo)航設(shè)置

通過(guò)使用data-options屬性，可以修改Magellan導(dǎo)航的一些設(shè)置。例如：

lt;div data-magellan-expedition"fixed" data-options"destination_threshold:60"gt;...

在上述代碼中，我們使用data-options屬性來(lái)設(shè)置destination_threshold的值為60。這個(gè)值用于控制滾動(dòng)到目標(biāo)位置前的偏移量。

如果本經(jīng)驗(yàn)對(duì)你有所幫助，請(qǐng)給予我們點(diǎn)贊并投上寶貴的一票。感謝您的支持！