パソコン倶楽部りんごでの勉強会でやったことを自分なりにまとめました。説明が前後したりすると思いますが、ご了承ください。左のnavと右のコンテンツdiv。スマホ等の表示領域が狭い場合に常にグローバルメニューがあると、コンテンツ領域が狭くなりユーザビリティが良くありません。メニューは常に隠しておいて、必要な時に出現させます。ちなみにDrawer(ドロワー)とは机とかの引き出しという意味です。基本的にはスマホ対策と言えると思いますが、PCサイトのように表示領域が大きい場合に、この仕組みを利用し遊び心として面白い演出をするのもアリだと思います。レスポンシブデザインになっていますので、横幅を変えてみたりして下さい。メニューを出すには、画面左上の≡をクリック。point最初の状態(menuが隠れてる)をAとします。menuが出現して右のコンテンツ領域がずれた状態をBとします。それをcssのtranslateXでアニメーションさせて入れ替えます。navのtransform:translateX(-100%)は隠れている状態です。クリックしたらBになります。transform:translateX(4%)です。for="on">≡</label>でボタンをやっています。2つで1つのセットと考える。つけるのがポイントです。≡は「合同」と日本語入力して変換すると出て来ます。#onはabsoluteします(clipを有効にするにはposition:absoluteするのは決まり事)。clip:rect(0,0,0,0);で非表示になります。clipというプロパティはcssスプライトみたいな感じです。.wrapのマージンで合同≡の場所を確保。cssに~がよく出て来ますが、セレクタの接続詞です。.bbbの同じ親に対しての指定となり、css3から新しく追加された指定の仕方です。onがチェックされているとnavのbの状態の指定が有効になる。cssのtransformを使った指定の仕方は、スマホならだいたい問題ないと思われるが、念のためjQueryでも実装してみます。その場合「アニメーションする為のcssは最後の2つだけです。」というのが不必要になります。要するにtransformというプロパティを使いcssでやるか、transformを使わずにjQueryでやるかという事になります。jQueryでやる場合はトリガーと、それようのcss(数行)が必要です。{-webkit-transform:translateX(4%);transform:translateX(4%);}/*以下は.wrapが横にずれた状態の指定。上段が普通に横にスライドで下段が立体になる。{/*-webkit-transform:translateX(50%);transform:translateX(50%);*/-webkit-transform:rotateY(-65deg);transform:rotateY(-65deg);}アニメーションする為のcssアニメーションする為のcssは全部のcssの最後の2つだけです。{-webkit-transform:translateX(4%);transform:translateX(4%);}/*以下は.wrapが横にずれた状態の指定。上段(コメントアウト)が普通に横にスライドで下段が立体になる。{/*-webkit-transform:translateX(50%);transform:translateX(50%);*/-webkit-transform:rotateY(-65deg);transform:rotateY(-65deg);}。