Foundation Off-Canvas Navigation

Sidebar Navigation

Off-Canvas sliding navigation is becoming increasingly popular on mobile pages (click the menu button to slide the menu from the left):

Creating Sliding Navigation

Here is an example of creating sliding navigation:

Example

<!-- Outer div: Page layout --><div class="off-canvas-wrap" data-offcanvas>  <!-- Inner element: "Toolbar" content (icons, links, description content, 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>    <!-- Sliding menu -->    <aside class="left-off-canvas-menu">      <!-- Add links or other content 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 menu -->    <a class="exit-off-canvas"></a>  </div> <!-- End inner content -->
</div> <!-- End sliding menu --><!-- Initialize Foundation JS --><script>
$(document).ready(function() {  
$(document).foundation();})
</script>