Foundation Magellan
Magellan is a scroll spy navigation component that automatically highlights the current visible section's corresponding navigation item when the page scrolls. This chapter will introduce how to use Magellan.
Basic Usage
html
<!-- Navigation -->
<nav data-magellan>
<ul class="menu">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
<!-- Content Sections -->
<section id="section1" data-magellan-target="section1">
<h2>Section 1</h2>
<p>Content...</p>
</section>
<section id="section2" data-magellan-target="section2">
<h2>Section 2</h2>
<p>Content...</p>
</section>
<section id="section3" data-magellan-target="section3">
<h2>Section 3</h2>
<p>Content...</p>
</section>Sticky Navigation
Combine with Sticky to create fixed navigation:
html
<div data-sticky-container>
<nav class="sticky" data-sticky data-margin-top="0" data-magellan>
<ul class="menu">
<li><a href="#intro">Introduction</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
</div>Vertical Navigation
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">Overview</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#usage">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>Overview</h2>
<p>This is the overview section content...</p>
</section>
<!-- More sections -->
</div>
</div>Configuration Options
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">
<!-- Navigation items -->
</ul>
</nav>| Option | Description | Default |
|---|---|---|
data-animation-duration | Scroll animation duration (ms) | 500 |
data-animation-easing | Animation easing function | linear |
data-threshold | Activation threshold (px) | 50 |
data-active-class | Active state class name | is-active |
data-deep-linking | Enable deep linking | false |
data-bar-offset | Top offset | 0 |
Custom Styles
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>Complete Example
html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation Magellan Example</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>
<!-- Sticky Top Navigation -->
<div data-sticky-container>
<nav class="magellan-nav sticky" data-sticky data-margin-top="0" data-magellan>
<ul class="menu">
<li><a href="#hero">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<!-- Hero Section -->
<section id="hero" data-magellan-target="hero" style="background: linear-gradient(135deg, #1779ba, #3adb76); color: white; text-align: center;">
<div class="grid-container">
<h1>Welcome to Foundation</h1>
<p class="lead">The Most Powerful Responsive Frontend Framework</p>
<a class="button large" href="#features">Learn More</a>
</div>
</section>
<!-- Features Section -->
<section id="features" data-magellan-target="features">
<div class="grid-container">
<h2 class="text-center">Features</h2>
<p class="text-center lead">Foundation provides rich features and components</p>
<div class="grid-x grid-margin-x small-up-1 medium-up-3" style="margin-top: 40px;">
<div class="cell text-center">
<h3>Responsive Design</h3>
<p>Mobile-first design philosophy, perfectly adapted to all devices.</p>
</div>
<div class="cell text-center">
<h3>Rich Components</h3>
<p>Dozens of pre-built UI components ready to use out of the box.</p>
</div>
<div class="cell text-center">
<h3>Highly Customizable</h3>
<p>Easy customization using Sass variables.</p>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" data-magellan-target="pricing">
<div class="grid-container">
<h2 class="text-center">Pricing Plans</h2>
<p class="text-center lead">Choose the plan that suits you</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>Free</h4>
<h3>$0</h3>
<ul class="no-bullet">
<li>Basic features</li>
<li>Community support</li>
</ul>
<a class="button hollow" href="#">Get Started</a>
</div>
</div>
</div>
<div class="cell">
<div class="card text-center" style="border: 2px solid #1779ba;">
<div class="card-section">
<h4>Pro</h4>
<h3>$99/mo</h3>
<ul class="no-bullet">
<li>All features</li>
<li>Priority support</li>
</ul>
<a class="button" href="#">Subscribe Now</a>
</div>
</div>
</div>
<div class="cell">
<div class="card text-center">
<div class="card-section">
<h4>Enterprise</h4>
<h3>Contact Us</h3>
<ul class="no-bullet">
<li>Custom features</li>
<li>Dedicated support</li>
</ul>
<a class="button hollow" href="#">Contact Sales</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" data-magellan-target="testimonials">
<div class="grid-container">
<h2 class="text-center">Testimonials</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 helped us quickly build a responsive website, greatly improving our development efficiency."</p>
<p><strong>— John, Frontend Engineer</strong></p>
</div>
</div>
</div>
<div class="cell medium-6">
<div class="card">
<div class="card-section">
<p>"Very easy to learn and use, thorough documentation, and an active community."</p>
<p><strong>— Jane, Product Manager</strong></p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" data-magellan-target="contact">
<div class="grid-container">
<h2 class="text-center">Contact Us</h2>
<div class="grid-x grid-margin-x">
<div class="cell medium-6 medium-offset-3">
<form>
<label>
Name
<input type="text" placeholder="Your name">
</label>
<label>
Email
<input type="email" placeholder="Your email">
</label>
<label>
Message
<textarea placeholder="Your message" rows="4"></textarea>
</label>
<button class="button expanded" type="submit">Send Message</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 Best Practices
- Clear Sectioning: Ensure each target section has sufficient height
- Reasonable Offset: Consider the height of fixed navigation bars
- Smooth Scrolling: Use appropriate animation duration
- Visual Feedback: Clear active state styling
Summary
In this chapter, we learned:
- Creating basic Magellan navigation
- Sticky navigation and vertical navigation
- Configuration options
- Custom styles
- Complete single-page application navigation example
Next chapter, we will learn Foundation Forms.