Foundation 滑動導航(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 >