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