ワイ、そして IT ときどき何か。

日々のとりとめのない記録

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