当サイトで紹介しているアニメーションで×印になるハンバーガーボタンや横から出てくるドロワーメニューの作り方をまとめたテンプレートを作成しました。このHTMLとCSSとJSを読み込めば手軽にドロワーメニューを実装することができます。
2018.04.02追記：クラス名に不備がありましたので、修正したve1.1をアップしています。指摘してくれた方、ありがとうございました！
2018.08.10追記：何人の方から左側に出るやつもほしいとの要望がありましたので、ver1.2にアップし、左側にも出るようにしました。
以下のGitHubのURLからテンプレートをダウンロードできます。
Releases · zarigani-design-office/drawer_menu
導入方法
ダウンロードしたら<div class="zdo_drawer_menu">で囲まれたHTMLをコピーして自身のHTMLへペーストします。
jQeuryを読み込みます。
cssフォルダ内のzdo_drawe_menu.cssとjsフォルダ内のzdo_drawer_menu.jsをそれぞれ読み込みます。
テンプレートにはcss,jsともに読み込まれているので、これを基にページを作成しても構いません。
ハンバーガーボタンジェネレーターとも連携しました。
拙作のハンバーガーボタンジェネレーターとの互換性をもたせました11行目付近の/* === Hambuerger Button's Style Paste Here === */から118行目の/* === Hambuerger Button's Style End === */までにジェネレーターで生成したCSSを貼り付けるとハンバーガーボタンをカスタマイズできます。
見た目の変更
CSSは zdo_drawe_menu.cssに書かれています。直接変更しても上書きしても構いません。
左側に出したい場合
<div class="zdo_drawer_menu">の部分にclass名leftを足して、<div class="zdo_drawer_menu left">にすればボタン、ナビゲーションともに左側になります。
ボタンとMENU文字の色
ボタンの色と文字色は 109行目の
/*+++ Default Button Color +++*/
.zdo_drawer_menu .zdo_drawer_button {
color: #276490;
}
.zdo_drawer_menu .zdo_drawer_button .zdo_drawer_bar {
background-color: #276490;
}
部分にかかれているのでカラーコードを変更すると色が変えられます。
ナビゲーションのカスタマイズ
ナビゲーションには基本的なCSSのみ適用しています。CSS 170行目の
/*+++ Default Navigation CSS +++*/
.zdo_drawer_menu .zdo_drawer_nav {
padding: 112px 24px;
}
.zdo_drawer_menu .zdo_drawer_nav li {
font-size: 16px;
margin-bottom: 15px;
}
に書かれているので、ここを書き換えてください。
その他
クラス名には接頭辞としてzdo_drawerをつけてあるのでクラス名のバッティングはないと思います。ラッパーとしてzdo_drawer_menuを使っています。このラッパーの中で一度リセットはしていますが、場合によってはCSSの上書きが発生するかもしれないので、表示がうまくいかない場合はCSSを確認してください。
ファイル内にはgulpfile.jsなど入っていますが必要なのはindex.html, zdo_drawer_menu.css, zdo_drawer_menu.jsの3つです。コンパイル前のzdo_drawer_menu.scssも入っています。
ライセンス
MIT License
無保証・商用利用可