Foundation Base

by CarambaMoreno

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/css/foundation.min.css">
<div class="grid-x">
  <div class="cell small-6">

    <!-- Add a Menu -->
    <ul class="menu expanded" data-magellan>
      <li><a href="#first1">First Arrival</a></li>
      <li><a href="#second1">Second Arrival</a></li>
      <li><a href="#third1">Third Arrival</a></li>
    </ul>

    <!-- Add content where magellan will be linked -->
    <div class="sections">
      <section id="first1" data-magellan-target="first">First Section</section>
      <section id="second1" data-magellan-target="second">Second Section</section>
      <section id="third1" data-magellan-target="third">Third Section</section>
    </div>

  </div>
  <div class="cell small-6">

    <!-- Add a Menu -->
    <ul class="menu expanded" data-magellan>
      <li><a href="#first">First Arrival</a></li>
      <li><a href="#second">Second Arrival</a></li>
      <li><a href="#third">Third Arrival</a></li>
    </ul>

    <!-- Add content where magellan will be linked -->
    <div class="sections">
      <section id="first" data-magellan-target="first">First Section</section>
      <section id="second" data-magellan-target="second">Second Section</section>
      <section id="third" data-magellan-target="third">Third Section</section>
    </div>

  </div>
</div>

CSS

section{border:2px solid red; height: 50vh;}

JavaScript

$(document).ready(function() {
  $(document).foundation();
});