ザリガニデザインオフィス

ドロワーメニュー用のテンプレートを作りましたのサムネイル

ドロワーメニュー用のテンプレートを作りました

当サイトで紹介しているアニメーションで×印になるハンバーガーボタン横から出てくるドロワーメニューの作り方をまとめたテンプレートを作成しました。この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
無保証・商用利用可

スポンサードリンク