簡単なものから練習。
animate({width:toggle})
$(this).toggleClass('peke')
- drawrクラス: 引き出しアニメーションさせる
- btnクラス: peke クラスを付けたり外したりする(見た目)
- animate() の引数に
{width:'toggle'}
を与えることで、横方向に出したり隠したりする
- ボタン画像を位置で表示切り替え
- 通常: position, top, right
- ペケ状態: background-position をずらす
- Z-index: 200
- 初期状態: display:none
- 出てくると、黒+アルファ0.6
- Z-index: 100 (ボタンより後ろ)
http://api.jquery.com/animate/
animate(properties)
- properties: CSS属性値を書いたjsオブジェクト。この値に向かってアニメーションする
todo: これをresponsive対応させて、横幅が狭いときのみハンバーガーメニューを出すようにする?