垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation Magellan ​

Magellan 是一个滚动监听导航组件，当页面滚动时，会自动高亮当前可见区域对应的导航项。本章将介绍 Magellan 的使用方法。

基本用法 ​

html
<!-- 导航 -->
<nav data-magellan>
    <ul class="menu">
        <li><a href="#section1">第一节</a></li>
        <li><a href="#section2">第二节</a></li>
        <li><a href="#section3">第三节</a></li>
    </ul>
</nav>

<!-- 内容区域 -->
<section id="section1" data-magellan-target="section1">
    <h2>第一节</h2>
    <p>内容...</p>
</section>

<section id="section2" data-magellan-target="section2">
    <h2>第二节</h2>
    <p>内容...</p>
</section>

<section id="section3" data-magellan-target="section3">
    <h2>第三节</h2>
    <p>内容...</p>
</section>

固定导航 ​

结合 Sticky 创建固定导航：

html
<div data-sticky-container>
    <nav class="sticky" data-sticky data-margin-top="0" data-magellan>
        <ul class="menu">
            <li><a href="#intro">介绍</a></li>
            <li><a href="#features">功能</a></li>
            <li><a href="#pricing">价格</a></li>
            <li><a href="#faq">FAQ</a></li>
        </ul>
    </nav>
</div>

垂直导航 ​

html
<div class="grid-x">
    <div class="cell medium-3">
        <div data-sticky-container>
            <nav class="sticky" data-sticky data-margin-top="0" data-magellan>
                <ul class="vertical menu">
                    <li><a href="#overview">概述</a></li>
                    <li><a href="#installation">安装</a></li>
                    <li><a href="#usage">使用方法</a></li>
                    <li><a href="#api">API 文档</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="cell medium-9">
        <section id="overview" data-magellan-target="overview">
            <h2>概述</h2>
            <p>这是概述部分的内容...</p>
        </section>
        <!-- 更多区域 -->
    </div>
</div>

配置选项 ​

html
<nav data-magellan
     data-animation-duration="500"
     data-animation-easing="linear"
     data-threshold="50"
     data-active-class="is-active"
     data-deep-linking="true"
     data-bar-offset="50">
    <ul class="menu">
        <!-- 导航项 -->
    </ul>
</nav>
选项说明默认值
data-animation-duration滚动动画时长(ms)500
data-animation-easing动画缓动函数linear
data-threshold激活阈值(px)50
data-active-class激活状态类名is-active
data-deep-linking启用深度链接false
data-bar-offset顶部偏移量0

自定义样式 ​

html
<style>
    [data-magellan] .menu a {
        color: #666;
        padding: 10px 15px;
        border-left: 3px solid transparent;
    }
    [data-magellan] .menu a:hover {
        color: #1779ba;
    }
    [data-magellan] .menu .is-active > a {
        color: #1779ba;
        border-left-color: #1779ba;
        background: rgba(23, 121, 186, 0.1);
    }
</style>

完整示例 ​

html
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Magellan 示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <style>
        .magellan-nav {
            background: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            z-index: 100;
        }
        .magellan-nav .menu {
            justify-content: center;
        }
        .magellan-nav .menu a {
            color: #666;
            padding: 15px 20px;
            transition: all 0.3s;
        }
        .magellan-nav .menu a:hover {
            color: #1779ba;
        }
        .magellan-nav .menu .is-active > a {
            color: #1779ba;
            border-bottom: 3px solid #1779ba;
        }

        section {
            padding: 80px 0;
            min-height: 500px;
        }
        section:nth-child(even) {
            background: #f8f8f8;
        }

        .sidebar-nav .menu a {
            color: #666;
            padding: 12px 20px;
            border-left: 3px solid transparent;
        }
        .sidebar-nav .menu .is-active > a {
            color: #1779ba;
            border-left-color: #1779ba;
            background: rgba(23, 121, 186, 0.05);
        }
    </style>
</head>
<body>
    <!-- 固定顶部导航 -->
    <div data-sticky-container>
        <nav class="magellan-nav sticky" data-sticky data-margin-top="0" data-magellan>
            <ul class="menu">
                <li><a href="#hero">首页</a></li>
                <li><a href="#features">功能特性</a></li>
                <li><a href="#pricing">价格方案</a></li>
                <li><a href="#testimonials">用户评价</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
    </div>

    <!-- Hero 区域 -->
    <section id="hero" data-magellan-target="hero" style="background: linear-gradient(135deg, #1779ba, #3adb76); color: white; text-align: center;">
        <div class="grid-container">
            <h1>欢迎使用 Foundation</h1>
            <p class="lead">最强大的响应式前端框架</p>
            <a class="button large" href="#features">了解更多</a>
        </div>
    </section>

    <!-- 功能特性 -->
    <section id="features" data-magellan-target="features">
        <div class="grid-container">
            <h2 class="text-center">功能特性</h2>
            <p class="text-center lead">Foundation 提供了丰富的功能和组件</p>

            <div class="grid-x grid-margin-x small-up-1 medium-up-3" style="margin-top: 40px;">
                <div class="cell text-center">
                    <h3>响应式设计</h3>
                    <p>移动优先的设计理念，完美适配各种设备。</p>
                </div>
                <div class="cell text-center">
                    <h3>丰富组件</h3>
                    <p>提供数十种预制 UI 组件，开箱即用。</p>
                </div>
                <div class="cell text-center">
                    <h3>高度可定制</h3>
                    <p>使用 Sass 变量轻松定制外观。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 价格方案 -->
    <section id="pricing" data-magellan-target="pricing">
        <div class="grid-container">
            <h2 class="text-center">价格方案</h2>
            <p class="text-center lead">选择适合您的方案</p>

            <div class="grid-x grid-margin-x small-up-1 medium-up-3" style="margin-top: 40px;">
                <div class="cell">
                    <div class="card text-center">
                        <div class="card-section">
                            <h4>免费版</h4>
                            <h3>¥0</h3>
                            <ul class="no-bullet">
                                <li>基础功能</li>
                                <li>社区支持</li>
                            </ul>
                            <a class="button hollow" href="#">开始使用</a>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card text-center" style="border: 2px solid #1779ba;">
                        <div class="card-section">
                            <h4>专业版</h4>
                            <h3>¥99/月</h3>
                            <ul class="no-bullet">
                                <li>全部功能</li>
                                <li>优先支持</li>
                            </ul>
                            <a class="button" href="#">立即订阅</a>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card text-center">
                        <div class="card-section">
                            <h4>企业版</h4>
                            <h3>联系我们</h3>
                            <ul class="no-bullet">
                                <li>定制功能</li>
                                <li>专属支持</li>
                            </ul>
                            <a class="button hollow" href="#">联系销售</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 用户评价 -->
    <section id="testimonials" data-magellan-target="testimonials">
        <div class="grid-container">
            <h2 class="text-center">用户评价</h2>
            <div class="grid-x grid-margin-x" style="margin-top: 40px;">
                <div class="cell medium-6">
                    <div class="card">
                        <div class="card-section">
                            <p>"Foundation 帮助我们快速构建了响应式网站，大大提高了开发效率。"</p>
                            <p><strong>— 张三，前端工程师</strong></p>
                        </div>
                    </div>
                </div>
                <div class="cell medium-6">
                    <div class="card">
                        <div class="card-section">
                            <p>"非常易于学习和使用，文档详尽，社区活跃。"</p>
                            <p><strong>— 李四，产品经理</strong></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" data-magellan-target="contact">
        <div class="grid-container">
            <h2 class="text-center">联系我们</h2>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-6 medium-offset-3">
                    <form>
                        <label>
                            姓名
                            <input type="text" placeholder="您的姓名">
                        </label>
                        <label>
                            邮箱
                            <input type="email" placeholder="您的邮箱">
                        </label>
                        <label>
                            消息
                            <textarea placeholder="您的消息" rows="4"></textarea>
                        </label>
                        <button class="button expanded" type="submit">发送消息</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

Magellan 最佳实践 ​

  1. 明确的区域划分：确保每个目标区域有足够的高度
  2. 合理的偏移量：考虑固定导航栏的高度
  3. 平滑滚动：使用适当的动画时长
  4. 视觉反馈：清晰的激活状态样式

总结 ​

本章我们学习了：

  • 基本 Magellan 导航的创建
  • 固定导航和垂直导航
  • 配置选项
  • 自定义样式
  • 完整的单页应用导航示例

下一章，我们将学习 Foundation 表单。