DAY46.実務でよく使うアニメーションの付け方編 スマホ時のドロワーメニュー

01.ドロワーが作れるライブラリ

1.drawer.js

対応ブラウザ
・IE10~
・Safari
・Chrome
・Firefox

2.hiraku.js

日本人が開発している

ドキュメントも全部日本語

02.ドロワーメニューを開いた時のレイヤー階層

ドロワーが開いた時の重なりを意識してz-indexを指定する

下から順
①通常のbody内のコンテンツ
②ヘッダー（※上部に固定表示するため）
③ドロワー開いた時の黒背景
④ドロワーメニュー
⑤ハンバーガーメニュー（バツアイコン）

レイヤー階層を間違えると、クリックできなかったり見栄えが変わる

03.aタグをクリックしてもページ遷移が起こさない

jQuery(".js-drawer").on("click", function(e) {
　e.preventDefault();
//ここにドロワーの記述
　return false;
});
aタグなどをクリックした時の標準の動きを無効化するためのもの