# 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> ```