Foundation Magellan 学习笔记

简介

Foundation 是一款响应式前端框架，其中的 Magellan 组件提供了页面内导航的功能。Magellan 可以帮助用户快速跳转到页面的目标内容，提升用户体验。

使用步骤

引入 Magellan 样式文件和 JavaScript 文件：

HTMLCopy Code
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>

创建导航条，并为其添加 ID 属性：

HTMLCopy Code
<nav data-magellan>
  <ul class="horizontal menu">
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
  </ul>
</nav>

在目标内容处添加 ID 属性：

HTMLCopy Code
<div id="section-1">
  <h2>Section 1</h2>
  <p>Content goes here.</p>
</div>

<div id="section-2">
  <h2>Section 2</h2>
  <p>Content goes here.</p>
</div>

<div id="section-3">
  <h2>Section 3</h2>
  <p>Content goes here.</p>
</div>

初始化 Magellan：

JavaScriptCopy Code
$(document).foundation();

示例

以下是一个简单的示例，展示了如何使用 Magellan 实现页面内导航功能：

HTMLCopy Code
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Magellan Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
  </head>
  <body>
    <nav data-magellan>
      <ul class="horizontal menu">
        <li><a href="#section-1">Section 1</a></li>
        <li><a href="#section-2">Section 2</a></li>
        <li><a href="#section-3">Section 3</a></li>
      </ul>
    </nav>

    <div id="section-1">
      <h2>Section 1</h2>
      <p>Content goes here.</p>
    </div>

    <div id="section-2">
      <h2>Section 2</h2>
      <p>Content goes here.</p>
    </div>

    <div id="section-3">
      <h2>Section 3</h2>
      <p>Content goes here.</p>
    </div>

    <script>
      $(document).foundation();
    </script>
  </body>
</html>

在该示例中，我们首先引入了 Magellan 的依赖文件，然后创建了一个导航条，并为其添加了 ID 属性。接着，在页面中的三个目标内容处分别添加了 ID 属性。最后，在页面加载完成后，我们初始化了 Magellan。

当用户在页面中点击导航条中的某个链接时，页面会自动滚动到相应的目标内容处。