Foundation CSS Magellan

Foundation CSS Magellan is a navigation plugin that allows you to create smooth scrolling navigation menus that automatically highlight the active section as the user scrolls through the page. Magellan is useful for creating one-page websites or long-scrolling pages with multiple sections. Here's how to implement Magellan in your Foundation CSS project:

1. Basic Setup

Start by adding the necessary markup for your navigation menu and sections. Each navigation link should have a corresponding section on the page.

<div data-magellan data-bar-offset="0">
  <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>
</div>

<div id="section1">
  <h2>Section 1</h2>
  <p>Content for section 1</p>
</div>

<div id="section2">
  <h2>Section 2</h2>
  <p>Content for section 2</p>
</div>

<div id="section3">
  <h2>Section 3</h2>
  <p>Content for section 3</p>
</div>

2. Initialize Magellan

Next, initialize Magellan by calling the foundation() method on the document and passing the magellan option.

$(document).foundation({
  magellan: {
    // Options here
  }
});

3. Customize Options

You can customize Magellan's behavior by passing options when initializing it. For example, you can adjust the offset for the navigation bar, set the animation speed, or specify the scroll duration.

$(document).foundation({
  magellan: {
    // Set the offset for the navigation bar
    barOffset: 0,
    // Set the animation speed (in milliseconds)
    animationDuration: 500,
    // Set the scroll duration (in milliseconds)
    throttleDelay: 50
  }
});

4. Styling

Finally, style the navigation menu and active section highlighting to match your website's design using CSS.

/* Style the navigation menu */
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  display: inline-block;
  margin-right: 10px;
}

.menu li:last-child {
  margin-right: 0;
}

/* Style the active navigation link */
.menu li.active a {
  color: blue; /* Change to your desired color */
}

Conclusion

Foundation CSS Magellan is a powerful tool for creating smooth scrolling navigation menus that enhance user experience on long-scrolling pages. By following these steps and customizing options to fit your project's requirements, you can easily implement Magellan in your Foundation CSS project.

Archive