Newest ⟷ Oldest
  1. Snapshot at 2017-04-12

    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>
    
  2. Snapshot at 2017-04-11

    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.