foundation-sites/docs/partials/off-canvi.html

The most advanced responsive front-end framework in the world.

<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
  <button class="close-button" aria-label="Close menu" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
  <ul class="mobile-ofc vertical menu">

    <li>
      <a href="https://zurb.com/responsive">Showcase</a>
      <ul class="submenu menu vertical" data-submenu>
        <li><a href="https://zurb.com/responsive">Foundation Showcase</a></li>
        <li><a href="https://get.foundation/showcase/brands.html">Brands</a></li>
        <li><a href="https://get.foundation/showcase/case-studies.html">Case Studies</a></li>
        <li><a href="https://get.foundation/showcase/blog.html">Blog</a></li>
        <li><a href="https://get.foundation/showcase/buzz.html">Buzz</a></li>
        <li><a href="https://get.foundation/showcase/about.html">About Foundation</a></li>
      </ul>
    </li>

    <li>
      <a href="https://get.foundation/develop/getting-started.html">Develop</a>
      <ul class="submenu menu vertical" data-submenu>
        <li class="title">Frameworks</li>
        <li><a href="https://get.foundation/sites.html">Foundation for Sites</a></li>
        <li><a href="https://get.foundation/emails.html">Foundation for Email</a></li>
        <li class="divider"></li>
        <li class="title">Develop</li>
        <li><a href="https://get.foundation/templates.html">HTML Templates</a></li>
        <li><a href="https://get.foundation/sites/resources.html">Resources</a></li>
        <li><a href="https://get.foundation/develop/building-blocks.html">Building Blocks</a></li>
        <li><a href="https://get.foundation/develop/contribute.html">Contribute</a></li>
      </ul>
    </li>

    <li>
      <a href="https://get.foundation/learn/tutorials.html">Tutorials</a>
      <ul class="submenu menu vertical" data-submenu>
        <li><a href="https://get.foundation/learn/tutorials.html">Tutorials</a></li>
        <li><a href="https://get.foundation/learn/classes.html">Classes</a></li>
        <li><a href="https://get.foundation/learn/custom-training.html">Custom Training</a></li>
        <li><a href="https://get.foundation/learn/certification.html">Certification</a></li>
      </ul>
    </li>

    <li>
      <a href="https://get.foundation/get-involved/support.html">Get Involved</a>
      <ul class="submenu menu vertical" data-submenu>
        <li><a href="https://get.foundation/get-involved/support.html">Connect</a></li>
        <li><a href="https://foundation.discourse.group">Foundation Forum</a></li>
        <li><a href="https://get.foundation/learn/events.html">Events</a></li>
        <li><a href="https://get.foundation/get-involved/faq.html">FAQs</a></li>
        <li><a href="https://get.foundation/get-involved/contribute.html">Contribute</a></li>
        <li><a href="https://get.foundation/get-involved/yetinauts.html">Yetinauts</a></li>
      </ul>
    </li>

    <li>
      <a href="https://get.foundation/frameworks-docs.html">Docs</a>
      <ul class="submenu menu vertical" data-submenu>
        <li><a target="_blank" href="https://get.foundation/sites/docs/">Sites Docs</a></li>
        <li><a target="_blank" href="https://get.foundation/emails/docs/">Emails Docs</a></li>
      </ul>
    </li>

    <li><a href="https://get.foundation/develop/getting-started.html" class="button">Getting Started</a></li>

  </ul>
</div>

<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
  <button class="close-button" aria-label="Close menu" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
  <ul class="vertical menu">
    <li><a href="#">Foundation</a></li>
    <li><a href="#">Dot</a></li>
    <li><a href="#">ZURB</a></li>
    <li><a href="#">Com</a></li>
    <li><a href="#">Slash</a></li>
    <li><a href="#">Sites</a></li>
  </ul>
</div>

<div class="off-canvas position-top" id="offCanvasTop" data-off-canvas data-position="top">
  <button class="close-button" aria-label="Close menu" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
  <ul class="mobile-ofc vertical menu">
    <li><a href="#">Off-canvas</a></li>
    <li><a href="#">Example</a></li>
    <li><a href="#">Vertical</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">From</a></li>
    <li><a href="#">The</a></li>
    <li><a href="#">Top</a></li>
  </ul>
</div>