レスポンシブWebデザイン導入計画（Parllet の場合 その５（スライドメニュー Animated Border Menus 篇－２）） [公開アプリ]
前回の続きです。
レスポンシブWebデザイン導入計画シリーズでは同じ挿絵を使います。（決して手抜きではありません。）
これまでのあらすじ
ドットインストールのレスポンシブなウェブサイトを作ろう に沿ってParllet（個人で作成・公開しているアルファ版のWeb家計簿）のトップページを改修し、相談役の妻の一言でFacebookやGoogle＋のようなスライドメニューの実装をと思い立つ。
jQuery Mobile からスライドメニューの要素だけ取り込もうと目論むも、あえなく失敗。
PageSlide を試すが "overlay" の動きの方が良いと感じ、Animated Border Menus をParllet（パレット） に組み込みはじめる。
単純に組み込んだ状態から、 Parllet（パレット） にそぐうように目下修正中。
て、ことで修正を続けていきます。
現状でメニューボタンを押した状態はこんな感じ。
おっ！っと、Style5 を使ってるのに下のborder が無い。（いずれ消すつもりではあったが・・。）
前回サクっとコメントアウトしちゃったけど、Animated Border Menus に box-sizing: border-box; が設定されていたのは、モロにこの辺の為だったんだね～。
もっと先に触れるつもりだったけど、参考：CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 によると
box-sizing プロパティとはボックスサイズ(width, height ) の算出方法を 指定する際に使用するプロパティです.
指定可能な値はこちら
content-box padding と border の幅を要素の幅と高さに含めない. デフォルト値.
border-box padding と border の幅を要素の幅と高さに含める.
とのこと。
まだきちんと全部を読んではいませんが、私も直感的に
すべての要素に box-sizing: border-box; を指定
するのが分かりやすいと思います。
"Facebookで登録" が途中で改行されちゃった
のは、むしろ私の作りの方がいい加減だからだ。
そもそも "勉強も兼ねていじる" って始めたことだし、一旦
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
に戻してやり直し。
オッケ、出た出た～。 （これから消すんですけどね。）
下側の border を消す（stylePrlt.css を以下のように変更）
.bt-menu.bt-menu-open {
border-width: 0px 0px 50px 150px;
}
↓
.bt-menu.bt-menu-open {
border-width: 0px 0px 0px 150px;
}
下側 border を消すだけなら上記だけでも消えるが、下側 border 用のレイアウト（".bt-menu ul:nth-of-type(2)" を含む以下の記述）は不要になるので、ソースの見通しの観点も含めて一応全て削除。
.bt-menu ul:nth-of-type(2) {
right: 0;
bottom: 0;
}
.bt-menu ul:nth-of-type(2) li {
float: left;
font-size: 0px;
}
.bt-menu.bt-menu-open ul:nth-of-type(2) li {
visibility: visible;
opacity: 1;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s 0.1s;
transition: transform 0.3s, opacity 0.3s;
}
.bt-menu ul:nth-of-type(2) li {
width: 60px;
height: 50px;
line-height: 50px;
-webkit-transform: scale(0);
transform: scale(0);
}
.bt-menu.bt-menu-open ul:nth-of-type(2) li:first-child {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.bt-menu.bt-menu-open ul:nth-of-type(2) li:nth-child(2) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.bt-menu.bt-menu-open ul:nth-of-type(2) li:nth-child(3) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.bt-menu.bt-menu-open ul:nth-of-type(2) li:nth-child(4) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.bt-menu.bt-menu-open ul:nth-of-type(2) li {
-webkit-transform: scale(1);
transform: scale(1);
}
.bt-menu ul:nth-of-type(2) li a {
color: transparent;
text-align: center;
font-size: 0px;
}
消えましたね。再度、 box-sizing: border-box; はコメントアウトしときます。（もっと時間に余裕があるときに border-box ベースで Parllet（パレット） の方を修正していくつもりです。）
*,
*:after,
*::before {
// -webkit-box-sizing: border-box;
// -moz-box-sizing: border-box;
// box-sizing: border-box;
}
メニューの中身を Parllet（パレット） なりに変更。
<li><a href="#" class="bt-icon icon-home">Search</a></li>
<li><a href="#" class="bt-icon icon-calendar">Compose</a></li>
<li><a href="#" class="bt-icon icon-folder-add">Profile</a></li>
<li><a href="#" class="bt-icon icon-download">Calendar</a></li>
<li><a href="#" class="bt-icon icon-window-delete">Download</a></li>↓
<li><a href="#divWhatIsParllet">Parllet とは</a></li>
<li><a href="#divTheOriginOfParllet">Parllet の由来</a></li>
<li><a href="#divBenefitsOfParllet">Parllet のメリット</a></li>
stylePrlt.css の変更。
.bt-menu.bt-menu-open {
border-width: 0px 0px 0px 150px;
}
↓
.bt-menu.bt-menu-open {
border-width: 0px 0px 0px 200px;
}
.bt-menu ul:first-of-type li {
width: 150px;
}
↓
.bt-menu ul:first-of-type li {
width: 200px;
}
stylePrlt.css の以下の部分の削除。
.bt-menu ul:first-of-type li a {
text-transform: uppercase;
letter-spacing: 1px;
}
"α(ｱﾙﾌｧ)版" よりも前に来るように stylePrlt.css に以下を追加。
.bt-menu {
z-index: 803;
}
ちょっと道草気味だけど、メニューボタンの動きは Demo 2 とか Demo 4 の方が好きだ。（≡ から × にアニメーションで変わる感じ。）
stylePrlt.css の一部を style2.css から拝借して以下のように変更。
.bt-menu-open .bt-menu-trigger span:before {
-webkit-transform: translateY(-300%);
transform: translateY(-300%);
}
.bt-menu-open .bt-menu-trigger span:after {
-webkit-transform: translateY(300%);
transform: translateY(300%);
}
↓
.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);
}
え～～っと。
道草し終わったタイミングでなんですが、今回はここまでです！
次回に続く！
11/30 追記
続きを書きました。
コメント 0