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

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

当サイトで紹介しているアニメーションで×印になるハンバーガーボタン横から出てくるドロワーメニューの作り方をまとめたテンプレートを作成しました。このHTMLとCSSとJSを読み込めば手軽にドロワーメニューを実装することができます。

以下のGitHubのURLからテンプレートをダウンロードできます。
(2018.04.02追記:クラス名に不備がありましたので、修正したve1.1をアップしています。指摘してくれた方、ありがとうございました!)
Releases · zarigani-design-office/drawer_menu

デモはこちら

導入方法

  1. ダウンロードしたら<div class="zdo_drawer_menu">で囲まれたHTMLをコピーして自身のHTMLへペーストします。
  2. jQeuryを読み込みます。
  3. cssフォルダ内のzdo_drawe_menu.cssとjsフォルダ内のzdo_drawer_menu.jsをそれぞれ読み込みます。

テンプレートにはcss,jsともに読み込まれているので、これを基にページを作成しても構いません。

見た目の変更

CSSは zdo_drawe_menu.cssに書かれています。直接変更しても上書きしても構いません。

ボタンとMENU文字の色

ボタンの色と文字色は136行目の

/*+++ Default Button Color +++*/
.zdo_drawer_menu .zdo_drawer_button {
  color: #276490;
}

.zdo_drawer_menu .zdo_drawer_button .zdo_drawer_bar {
  background-color: #276490;
}

部分にかかれているのでカラーコードを変更すると色が変えられます。

ナビゲーションのカスタマイズ

ナビゲーションには基本的なCSSのみ適用しています。CSS126行目の

/*+++ 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
無保証・商用利用可