横から出てくるドロワーメニューの作り方
お知らせ：ハンバーガーボタン×ドロワーメニューのテンプレートを作成しました。詳しくはこちら
CSSのtransitionとtranslateを組み合わせます。
クリックすると、横からニュッとメニューが出てくるやつの実装方法です。最近はCSSによりアニメーションのサポートが進み、複雑なjQueryを書かなくても済みます。
上記の記述はメニューの大きさが横幅312px、高さ100%のものですが、こちらはご自身のものに応じて変更してください。ここではこの大きさで話を進めていきます。
大きさ以外のCSSですがposition:fixedとtop:0;right:0で右端のに固定しています。z-indexは1000くらいで優先的に上にくるようにしています。transform:translate(312px)で312px(メニューに大きさの分だけ)右にずらして外に出します。transition:all 0.2sで値の変化にアニメーションをつけます。今回は0.2秒で出てきます。
デフォルトではtranslateでずれているので右端から出ていますがopenのクラス名がつくとtranslateの値が0になります。この312pxから0になる変化を、transitionによって0.2秒の間に段階的に変化させることでアニメーションを実現しています。
クラスを付けたり取ったりするのがjQueryの役目で、クラスbutton_menuをクリックすると、toggleClassによってopenのクラス名を制御しています。
これをアニメーションで×印になるハンバーガーボタンと組合わせるとこのサイトのようなメニューができます。
