In the last lesson we built a mega-menu that favors desktop browsers. Now we're ready to build the mobile version of our mega-menu: an off-canvas navigation component (whose name isn't quite as complicated as its HTML).

You can do build one several ways: with the same content fidelity of the desktop version, or collapsed into sub menus. Because this menu is not too terribly complicated, we'll keep the content layout similar. Here's how to implement a mobile-friendly off-canvas nav component.

1. Start with a wrapper

The off-canvas component has a few distinct pieces: An overall container, a container to hold the navigation, and something to hold the content that gets out of its way.

A "off-canvas-wrap" creates a container for the whole page. That is, everything we want to get out of the way when the off-canvas menu appears.

 

<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    <a class="left-off-canvas-toggle" href="#">
      <div> <!-- custom menu icon -->
        <div class="top-bar"></div>
        <div class="middle-bar"></div>
        <div class="bottom-bar"></div>
      </div>
    </a>
  </nav>
  <!-- Off Canvas Menu -->
  <aside class="left-off-canvas-menu">
    <!-- menu content goes here -->
  </aside>
</div>

 

What’s all this?

• off-canvas-wrap and data-offcanvas — Turns the containing div into an off-canvas wrapper that will move left and right to reveal/hide the navigation.
• inner-wrap — The container that actually shifts left and right relative to off-canvas-wrap.
• left-off-canvas-toggle — The button that users click to reveal/hide the navigation.
• left-off-canvas-menu — Container for the navigation that’s initially hidden.

2. Add nav content

If there's one cool thing about off-canvas navs, it's that you can embed any content, even a grid. We'll start by adding some standard Foundation columns.

<div>
  <div class="small-12 columns"> </div>
</div>

 

We'll add a search form:

<img src="#" alt="logo" />
<form>
  <div class="row collapse">
    <label>Search Our Inventory</label>
    <div class="small-9 columns">
      <input type="search" placeholder="find something" />
    </div>
    <div class="small-3 columns">
      <span>Search</span>
    </div>
  </div>
</form>

 

The thumbnails get a block grid:

<h4>Shop by Style</h4>
<ul class="small-block-grid-2">
  <li>
    <img src="#" alt="product photo">
    <p>Description</p>
  </li>
  <li>
    <img src="http://placehold.it/50x50">
    <p>Description</p>
  </li>
  <li>
    <img src="http://placehold.it/50x50">
    <p>Description</p>
  </li>
</ul>

 

Categories and contact are unordered lists with icons.

<h4>Shop by Category</h4>
<ul>
  <li><a href="#">Beds</a></li>
  <li><a href="#">Wardrobe</a></li>
  <li><a href="#">Nightstands</a></li>
  <li><a href="#">Mirrors</a></li>
  <li><a href="#">Lamps</a></li>
  <li><a href="#">Duvets</a></li>
</ul>

<h4>Contact Us</h4>
<ul>
  <li>1-877-000-0000</li>
  <li>[email protected]</li>
  <li>@dualityfurniture</li>
</ul>

 

3. Add body content

Your main body content goes inside this wrap.

<!-- main content goes here -->
<section>
  <img src="#" alt="logo" />
</section>
<a class="exit-off-canvas"></a>

 

And that's it: A wrapper, content for the navigation, and content for the page. View the complete example in our CodePen. Next time we'll talk about putting these two menus — top bar and off-canvas nav — together.

---