Foundation 5新增的Off Canvas可以擬模側滑菜單的效果，但在性能較差的手機上會出現延遲的問題，因為它會將整個頁面以CSS transform的translate3d移動，其實大部分情況只需要顯示菜單，所以可以將Off Canvas和Top Bar整合，請看以下的實例：
CSS transform：
http://www.w3schools.com/cssref/css3_pr_transform.asp
Foundation 5 Off Canvas文檔：
http://foundation.zurb.com/docs/components/offcanvas.html
Js Fiddle示範：
http://jsfiddle.net/indream/hSu4c/
1. 先將div.tab-bar加上top-bar class，並以div.fixed包住。
<div class="fixed">
<nav class="tab-bar top-bar">
<section class="left-small"> <a class="left-off-canvas-toggle menu-icon"><span></span></a></section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small"></section>
</nav>
</div>
2. 加入以下的CSS
/* 下移.top-bar擋住的文字 */
body {
margin-top: 2.8125rem;
}
/* 修正被.exit-off-canvas擋住的菜單 */
.fixed, .left-off-canvas-menu {
z-index: 1003;
}
.move-right .left-off-canvas-menu {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
.left-off-canvas-menu {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
left: -100%;
/* 可以在此修改Off Canvas動畫的時間 */
-webkit-transition: 0.5s;
transition: 0.5s;
}
.move-right>.inner-wrap {
-webkit-transform: none;
transform: none;
}
.move-right a.exit-off-canvas {
-webkit-transition: none;
transition: none;
}
3. 頁面載入後執行以下的JS
$(document).foundation();
// 將Off Canvas設為頁面的高度，並在開啟時固定在頁面中央
$(".inner-wrap, .left-off-canvas-menu, .main-section").height($(window).height() - $(".fixed").height());
