foundation で off-canvas のナビゲーションバーやメニューなどが fixed されないバグ

fixed を class に設定しても、off-canvas のメニューやナビゲーションが上のほうに固定されない。 メニューを出すボタンやリンクをクリックしても一段ずれることも。 かと言って、<nav class=“right-off-canvas-menu fixed"> にしても右から出てくるメニューは固定されない上、変なところに表示される。

なお、HTMLは以下のようにしている。 [HTML]

<div class=“off-canvas-wrap” data-offcanvas=”">
<div class=“inner-wrap”>
<div class=“fixed”>
<nav class=“top-bar” data-topbar role=“navigation”>
<div class=“left”>
<h1 style=“color:white;">logo</h1>
</div>
<div class=“right”>
<a class=“right-off-canvas-toggle” href=”#">Menu</a>
</div>
</nav>
</div>
<!– Off Canvas Menu –>
<nav class=“right-off-canvas-menu”>
<!– whatever you want goes here –>
<ul>
<li><label>St.age メニュー</label></li>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
<li><a href="#">item 6</a></li>
<li><a href="#">item 7</a></li>
<li><a href="#">item 8</a></li>
<li><a href="#">item 9</a></li>
<li><a href="#">item 10</a></li>
</ul>
</nav>
<!– main content goes here –>
<p>Set in the year 0 F.E. (“Foundation Era”), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.(略)
</p>
<!– close the off-canvas menu –>
<a class=“exit-off-canvas”></a>
</div>
</div>
<script src=“bower_components/jquery/dist/jquery.min.js”></script>
<!– script src=“bower_componets/foundation/js/vendor/jquery.js”></script –>
<script src=“bower_components/foundation/js/foundation.min.js”></script>

<script>
$(document).foundation();
</script>

で、“app.scss” に以下の項目を追加して app.css を生成

[app.scss]

@import “compass”;

.inner-wrap {
@include transition (left 200ms ease);
}
.move-left .inner-wrap {
left: -250px;
@include transform(none);
}
.right-off-canvas-menu {
position: fixed;
z-index: 10000; /* ナビゲーション・メニューの影の部分が iPhone では消えてしまうので、あえて消すようにする */
right: -250px;
@include transform(none);
@include transition (right 200ms ease);
}
.move-left .right-off-canvas-menu {
right: 0px;
}

ちなみに、追加された CSS のスタイルは以下のもの [app.css]

/* line 5, ../scss/app.scss */
.inner-wrap {
-moz-transition: left 200ms ease;
-o-transition: left 200ms ease;
-webkit-transition: left 200ms ease;
transition: left 200ms ease;
}

/* line 8, ../scss/app.scss */
.move-left .inner-wrap {
left: -250px;
-moz-transform: none;
-ms-transform: none;
-webkit-transform: none;
transform: none;
}
/* line 12, ../scss/app.scss */
.right-off-canvas-menu {
position: fixed;
z-index: 10000;
right: -250px;
-moz-transform: none;
-ms-transform: none;
-webkit-transform: none;
transform: none;
-moz-transition: right 200ms ease;
-o-transition: right 200ms ease;
-webkit-transition: right 200ms ease;
transition: right 200ms ease;
}
/* line 18, ../scss/app.scss */
.move-left .right-off-canvas-menu {
right: 0px;
}

これで固定された。 なお[メニュー]というテキストは消える模様。

ちなみに、html { font-size: 62.5%; } と表記している場合は

.move-left .inner-wrap {
left: -160px;

くらいがいいかも。

via : http://foundation.zurb.com/forum/posts/547-off-canvas-with-fixed-top-bar Karl Ward