レスポンシブWebデザイン導入計画（Parllet の場合 その７（スライドメニュー Animated Border Menus 篇－４）） [公開アプリ]
前回の続きです。
レスポンシブWebデザイン導入計画シリーズでは同じ挿絵を使います。（決して手抜きではありません。）
これまでのあらすじ
ドットインストールのレスポンシブなウェブサイトを作ろう に沿ってParllet（個人で作成・公開しているアルファ版のWeb家計簿）のトップページを改修し、相談役の妻の一言でFacebookやGoogle＋のようなスライドメニューの実装をと思い立つ。
jQuery Mobile からスライドメニューの要素だけ取り込もうと目論むも、あえなく失敗。
PageSlide を試すが "overlay" の動きの方が良いと感じ、Animated Border Menus をParllet（パレット） に組み込みはじめる。
単純に組み込んだ状態から Parllet（パレット） にそぐうように修正し、今のメニュー数での動きとしては問題ないところまで来た。
残るは "Android 2.3 スクロール" 問題だが・・・。
ざっくり環境です。
OS：Windows 7 Home Premium
ブラウザ：IE 11.0
早速メニューをワザと増やします。
＜nav id="bt-menu" class="bt-menu"＞
＜a href="#" class="bt-menu-trigger"＞＜span＞＜/span＞＜/a＞
＜ul＞
＜li＞＜a href="#divWhatIsParllet"＞Parllet とは＜/a＞＜/li＞
＜li＞＜a href="#divTheOriginOfParllet"＞Parllet の由来＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞Parllet のメリット＜/a＞＜/li＞
＜/ul＞
＜div class="bt-overlay"＞＜/div＞
＜/nav＞
↓
＜nav id="bt-menu" class="bt-menu"＞
＜a href="#" class="bt-menu-trigger"＞＜span＞＜/span＞＜/a＞
＜ul＞
＜li＞＜a href="#divWhatIsParllet"＞Parllet とは＜/a＞＜/li＞
＜li＞＜a href="#divTheOriginOfParllet"＞Parllet の由来＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞Parllet のメリット＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞メニューその他１＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞メニューその他２＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞メニューその他３＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞メニューその他４＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞メニューその他５＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞メニューその他６＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞メニューその他７＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞メニューその他８＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞メニューその他９＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞メニューその他１０＜/a＞＜/li＞
＜/ul＞
＜div class="bt-overlay"＞＜/div＞
＜/nav＞
まずは PC で表示。
この時点では PC でもスクロールしません。（よ、予想はしてたよ。）
メニューリストを div で囲んで overflow: hidden; とし、メニューが開いたときだけ overflow-y: auto;
html ファイルの編集
＜nav id="bt-menu" class="bt-menu"＞
＜a href="#" class="bt-menu-trigger"＞＜span＞＜/span＞＜/a＞
＜ul＞
＜li＞＜a href="#divWhatIsParllet"＞Parllet とは＜/a＞＜/li＞
＜li＞＜a href="#divTheOriginOfParllet"＞Parllet の由来＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞Parllet のメリット＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞メニューその他１＜/a＞＜/li＞
:
中略
:
＜li＞＜a href="#divBenefitsOfParllet"＞メニューその他１０＜/a＞＜/li＞
＜/ul＞
＜div class="bt-overlay"＞＜/div＞
＜/nav＞
↓
＜nav id="bt-menu" class="bt-menu"＞
＜a href="#" class="bt-menu-trigger"＞＜span＞＜/span＞＜/a＞
＜div id="divUlFrm"＞
＜ul＞
＜li＞＜a href="#divWhatIsParllet"＞Parllet とは＜/a＞＜/li＞
＜li＞＜a href="#divTheOriginOfParllet"＞Parllet の由来＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞Parllet のメリット＜/a＞＜/li＞
＜li＞＜a href="#divBenefitsOfParllet"＞メニューその他１＜/a＞＜/li＞
:
中略
:
＜li＞＜a href="#divBenefitsOfParllet"＞メニューその他１０＜/a＞＜/li＞
＜/ul＞
＜/div＞
＜div class="bt-overlay"＞＜/div＞
＜/nav＞
stylePrlt.css の編集
.bt-menu ul {
position: fixed;
margin: 0;
padding: 0;
list-style: none;
}
.bt-menu ul:first-of-type {
top: 75px;
left: 0;
}
↓
.bt-menu #divUlFrm {
position: fixed;
margin: 0;
padding: 0;
list-style: none;
top: 75px;
left: 0;
overflow: hidden;
}
.bt-menu.bt-menu-open #divUlFrm {
height: 100%;
overflow-y: auto;
}
メニューリストのスクロールバーの下が、.bt-menu #divUlFrm の top: 75px で指定した分だけウィンドウ外にはみ出て見えなくなる。
そうなってくると、 .bt-menu #divUlFrm を top: 0 とするのが手っ取り早くて分かりやすい。
その場合、メニューボタン（メニューが開いた時に "≡" から "×" に変形していた）がむしろ邪魔になってしまう。
むぅ・・・。 "≡" から "×" への変形は好きだったのだが、今回は見送ろう。
stylePrlt.css の編集
.bt-menu #divUlFrm {
top: 75px;
}
↓
.bt-menu #divUlFrm {
top: 0;
}
.bt-menu-open .bt-menu-trigger span {
background-color: transparent;
}
.bt-menu-open .bt-menu-trigger span:before {
-webkit-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg);
}
.bt-menu-open .bt-menu-trigger span:after {
-webkit-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
}
↓
.bt-menu-open .bt-menu-trigger {
display: none;
}
今までの慣れのせいもあるかも知れないが、メニューの天辺に余裕が欲しい。
＜li＞一個分空くだけで落ち着く気がするので、単純に先頭に足してみる。
html ファイルの編集
＜nav id="bt-menu" class="bt-menu"＞
＜a href="#" class="bt-menu-trigger"＞＜span＞＜/span＞＜/a＞
＜div id="divUlFrm"＞
＜ul＞
＜li＞＜a href="#divWhatIsParllet"＞Parllet とは＜/a＞＜/li＞
:
中略
:
＜li＞＜a href="#divBenefitsOfParllet"＞メニューその他１０＜/a＞＜/li＞
＜/ul＞
＜/div＞
＜div class="bt-overlay"＞＜/div＞
＜/nav＞
↓
＜nav id="bt-menu" class="bt-menu"＞
＜a href="#" class="bt-menu-trigger"＞＜span＞＜/span＞＜/a＞
＜div id="divUlFrm"＞
＜ul＞
＜li＞＜/li＞
＜li＞＜a href="#divWhatIsParllet"＞Parllet とは＜/a＞＜/li＞
:
中略
:
＜li＞＜a href="#divBenefitsOfParllet"＞メニューその他１０＜/a＞＜/li＞
＜/ul＞
＜/div＞
＜div class="bt-overlay"＞＜/div＞
＜/nav＞
一応 PC での動きは出来たようです。
今回 Android 2.3.3 のスクロール問題と対峙するつもりが、PC での調整や路線変更だけで結構かかってしまいました。
次回に続きます！
12/2 追記
続きを書きました。
コメント 0