# Foundation 滑动导航(Off-Canvas) ## 侧边栏导航 Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了 (点击菜单按钮菜单从左侧滑出):  ## 创建滑动导航 创建滑动导航实例如下： ### 实例 ``` <!-- 最外层div：页面布局 --> <div class="off-canvas-wrap" data-offcanvas>   <!-- 内部元素: "工具栏" 内容 (图标, 链接, 描述内容等)-->   <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>     <!-- 滑动菜单 -->     <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>     <!-- 主要内容 -->     <section class="main-section">       <h3>Lorem Ipsum</h3>       <p>....</p>     </section>     <!-- 关闭菜单 -->     <a class="exit-off-canvas"></a>   </div> <!-- 结束内部内容 --> </div> <!-- 结束滑动菜单 --> <!-- 初始化 Foundation JS --> <script> $(document).ready(function() {     $(document).foundation(); }) </script> ```