Manuel de base en chinois /Foundation Magellan

Foundation Magellan

Foundation 麦哲伦(Magellan)导航


如何创建麦哲伦导航

麦哲伦导航就是一个导航索引,创建方式如下:

实例

   Foundation 实例       

Magellan

麦哲伦导航就是一个导航索引,位置是固定的,会根据用户滚动当前展示的内容自动切换导航栏上的导航项:



页面 1

滚动屏幕,查看导航栏上的变化。

页面 2

滚动屏幕,查看导航栏上的变化。并尝试向上滚动。


运行实例 »

点击 "运行实例" 按钮查看在线实例

实例解析

元素上添加data-magellan-expedition="fixed"属性来创建麦哲伦导航。

然后在

  • 上添加data-magellan-arrival="value"属性,后面添加一个与该属性值一样的链接(page1)。

    使用data-magellan-destination="value"属性来控制麦哲伦导航的目标, 后面紧跟的元素添加name="value"属性。两个属性的值必须与data-magellan-arrival的值一致 (page1)。

    最后,初始化 Foundation JS ,用户在滚动页面时导航就会根据当前显示的内容自动切换。


    麦哲伦导航头部工具条

    麦哲伦导航使用头部工具条实例:

    实例

       Foundation 实例       
    

    Magellan 头部导航实例

    向下滚动页面查看效果。

    Page1

    滚动屏幕,查看导航栏上的变化。

    Page2

    滚动屏幕,查看导航栏上的变化。并尝试向上滚动。


    运行实例 »

    点击 "运行实例" 按钮查看在线实例


    麦哲伦导航内边距

    默认情况下,麦哲伦导航的

    元素有 10px 的内边距。可以使用 CSS 移除它:

    实例

       Foundation 实例        
    

    Magellan 头部导航实例

    向下滚动页面查看效果。

    Page1

    滚动屏幕,查看导航栏上的变化。

    Page2

    滚动屏幕,查看导航栏上的变化。并尝试向上滚动。


    运行实例 »

    点击 "运行实例" 按钮查看在线实例


    麦哲伦导航选项

    使用 data-options 属性修改麦哲伦导航的设置, 例如

    :

    名称 类型 默认 描述 实例
    active_class string active 指定激活链接的类 尝试一下
    threshold number 0 指定导航在什么时候需要固定位置。会根据滚动条滚动计算,默认为 0 (auto)。 尝试一下
    destination_threshold number 20 设该值设定了导航链接显示为激活(蓝色背景)时导航列表距离顶部的值。 尝试一下
    fixed_top number 0 指定了导航条距离头部的像素值 尝试一下