阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    Foundation 麦哲伦(Magellan)导航

    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 指定了导航条距离头部的像素值 尝试
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录