Off-canvas メニューは、ビューポートの外側に配置され、アクティブ（左のハンバーガー/メニューボタンをクリック）時に スライドインします：
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
off-canvas メニューの作成方法：
<!-- The outermost div: the page layout -->
<div class="off-canvas-wrap"
data-offcanvas>
<!-- Inner wrap: "Topbar" content (icons, links,
descriptive text etc)-->
<div class="inner-wrap">
<nav class="tab-bar">
<section
class="left-small">
<a
class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle
tab-bar-section">
<h1
class="title">Off-canvas Example</h1>
</section>
</nav>
<!-- The
Off Canvas Menu (slides out) -->
<aside
class="left-off-canvas-menu">
<!-- Add
links or other stuff here -->
<ul
class="off-canvas-list test">
<li><label>Heading</label></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
...
</ul>
</aside>
<!-- Main content -->
<section
class="main-section">
<h3>Lorem Ipsum</h3>
<p>....</p>
</section>
<!--
Close the off-canvas menu -->
<a
class="exit-off-canvas"></a>
</div> <!-- end inner wrap -->
</div> <!-- end off-canvas -->
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Try it Yourself »