创建滑动导航

创建滑动导航实例如下：

实例

1. <!-- 最外层div：页面布局 -->
2. <div class="off-canvas-wrap" data-offcanvas>
3.   <!-- 内部元素: "工具栏" 内容 (图标, 链接, 描述内容等)-->
4.   <div class="inner-wrap">
5.     <nav class="tab-bar">
6.       <section class="left-small">
7.         <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
8.       </section>
9.       <section class="middle tab-bar-section">
10.         <h1 class="title">Off-canvas Example</h1>
11.       </section>
12.     </nav>
13.     <!-- 滑动菜单 -->
14.     <aside class="left-off-canvas-menu">
15.       <!-- Add links or other stuff here -->
16.       <ul class="off-canvas-list test">
17.         <li><label>Heading</label></li>
18.         <li><a href="#">Link 1</a></li>
19.         <li><a href="#">Link 2</a></li>
20.         ...
21.       </ul>
22.     </aside>
23.     <!-- 主要内容 -->
24.     <section class="main-section">
25.       <h3>Lorem Ipsum</h3>
26.       <p>....</p>
27.     </section>
28.     <!-- 关闭菜单 -->
29.     <a class="exit-off-canvas"></a>
30.   </div> <!-- 结束内部内容 -->
31. </div> <!-- 结束滑动菜单 -->
32. <!-- 初始化 Foundation JS -->
33. <script>
34. $(document).ready(function() {
35.     $(document).foundation();
36. })
37. </script>

实例预览 »