Off canvas

Off Canvas is a slide-in navigation approach from Zurb. The top bar that we just discussed uses drop down menu. This Off-canvas widget use slide in menu from left or right side of the screen.

<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
  <!-- Your menu or Off-canvas content goes here -->
</div>

Off canvas

Off Canvas is a slide-in navigation approach from Zurb. The top bar that we just discussed uses drop down menu. This Off-canvas widget use slide in menu from left or right side of the screen.

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

    <a class="left-off-canvas-toggle" href="#">Left Menu</a>

    <a class="right-off-canvas-toggle" href="#">Right Menu</a>

    <!-- Off Canvas Menu (Left) -->
    <aside class="left-off-canvas-menu">
      <!-- whatever you want goes here -->
      <ul>
        <li><a href="#">Item 1</a>
        </li>
        <li><a href="#">Item 1</a>
        </li>
        <li><a href="#">Item 1</a>
        </li>
      </ul>
    </aside>

    <!-- Off Canvas Menu (Right) -->
    <aside class="right-off-canvas-menu">
      <img src='http://placehold.it/300x100' alt='placeholder' />
      <ul>
        <li><a href="#">Right Item 1</a>
        </li>
        <li><a href="#">Right Item 1</a>
        </li>
        <li><a href="#">Right Item 1</a>
        </li>
      </ul>
    </aside>

    <p>Your main content goes here.</p>

    <!-- closing the off-canvas -->
    <a class="exit-off-canvas"></a>

  </div>
</div>

Open example in jsFiddle

As usual, the official documentation provides more usage examples.