Foundation/Off-canvas (Flex)

foundation-off-canvas-flex.markdown

Foundation/Off-canvas (Flex)

Example of Foundation's Off-canvas component.

A Pen by Ian Kirkland on CodePen.

License.

index.html

<section class="container">

  
  <!-- Your menu or off-canvas content goes here -->
  <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
    <br>
    
    <!-- vertical menu -->
    <ul class="menu vertical">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  
    <!-- close button -->
    <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
    </button>

  </div>

  
  
  <!-- Your page content lives here -->  
  <div class="off-canvas-content" data-off-canvas-content>
    
    <h2>Off-canvas</h2>
    <p>Setting up the Off-canvas only requires two elements! To setup the Off-canvas create an off-canvas container with the class <code>.off-canvas</code> and the attribute <code>data-off-canvas</code>. This is the container that holds your Off-canvas content.</p>
    <p>The Off-canvas container also needs a positioning class to determine which side of the viewport it opens from:</p>
    
    <ul>
      <li><code>.position-left</code></li>
      <li><code>.position-right</code></li>
      <li><code>.position-top</code></li>
      <li><code>.position-bottom</code></li>
    </ul>
    
    <br>
    
    <p>Foundation's Close component can be used inside the off-canvas to close it. <a href="http://foundation.zurb.com/sites/docs/close-button.html">Learn more about Foundation's close button.</a></p>

    <button type="button" class="button" data-toggle="offCanvas">Open off-canvas</button>
    <br><hr>
    
    <h4>Page Content Placeholder</h4>
    <p>Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend. Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra. Sed pulvinar, felis id consectetuer malesuada, enim nisl mattis elit, a facilisis tortor nibh quis leo. Sed augue lacus, pretium vitae, molestie eget, rhoncus quis, elit. Donec in augue. Fusce orci wisi, ornare id, mollis vel, lacinia vel, massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    
  </div>
  
</section>

script.js

$(document).foundation();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://codepen.io/ZURBFoundation/pen/LyejWr"></script>

style.css

/** 
 * Demo Styles 
 */

* { 
  color: #444444; 
}

body {
  padding: 2rem;
}

.container {
  width: 80%;
  margin: auto;
  margin-top: 2em;
}

.row {
  margin-bottom: 2em;
}

.row.small-up-12 {
  margin-bottom: 0;
}

.column {
  margin-bottom: .5em;
}

/* Hides Foundation Docs Callout */
[href*="https://foundation.zurb.com/sites.html"] {
	visibility: hidden !important;
	padding: 0px !important;
	margin: 0px !important;
	width: 0px !important;
	height: 0px !important;
	display: none !important;
}

styles

<link href="http://codepen.io/ZURBFoundation/pen/jmYLwq" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet" />