So you learned a way to make a desktop mega menu and how to fold that content into a mobile off-canvas component. But we don't want to load duplicate content onto the page because we will slow page load and confuse SEO. Instead we'll use the amazing Foundation interchange plugin to swap in the desktop menu on larger screens. In this lesson, we'll see how to only burden the page with one set of markup at a time.

1. Give each menu its own file.

Since the mobile and desktop menu are both only partial HTML (not complete page themselves) we'll place each into a separate folder we'll call "partials".

Add your menus' HTML into their respective folders.

2. Set up the main page for Interchange.

Because off-canvas wraps the page content, you only need to use Interchange to swap in the menu itself.

<nav class="tab-bar">
  <section class="left-small">
    <a class="left-off-canvas-toggle menu-icon" href="#">
    <span></span></a>
  </section>

  <section class="middle tab-bar-section">
    <h1>…</h1>
  </section>
</nav>

<aside class="left-off-canvas-menu">
  <ul class="off-canvas-list">
    <li><label>…</label></li>
    <li><a href="#">…</a></li>
    <li><a href="#">…</a></li>
  </ul>
</aside>

<a class="exit-off-canvas"></a>

The off-canvas wraps can go here since they wrap the entire page:

<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    …
  </div>
</div>

3. Add Interchange to the main page.

<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    <!-- this is where the magic happens -->
    <div id="swap" data-interchange="
    [partials/mobile-menu.html, (small)],
    [partials/desktop-menu.html, (medium)]">
    …
    </div>
  </div>
</div>

You create the interchange div inside the container of your choice, be it a row and columns or any other box.

Since Foundation uses mobile-first concepts, browsers load content intended for small screens first. First, set the path to your partial. Then add in medium and large if needed. Since medium and large are the same in our example, you only need to load a medium — essentially medium-up.

4. Bring Interchange to life.

Since we loaded JavaScript components after the page loads, we need to trigger a replace event:

$(document).foundation();
$("#swap").on("replace", function() {
  $(document).foundation();
});

The ID of our interchange div is swap, so make sure it matches here. This re-initializes Foundation plugins on replace event of Interchange.

Pro tip: To make the off-canvas open wider, change the % on this variable in the _settings.scss file.

$off-canvas-width: 40%;

Which creates this in CSS:

.left-off-canvas-menu {
  min-width: 40%;
}
.move-right > .inner-wrap {
   transform: translate3d(40%, 0, 0);
}

Thats it! Interchange makes your page load faster by only adding the components your users need. Check out the complete code.

---