Travelogue

Drawer（drawer.js）の見た目をカスタマイズするCSSの書き方

公開日：

レスポンシブのHTMLコーディングの時、手軽に使えてシンプルで重宝しているドロワーメニュー「Drawer（drawer.js）」で、その見た目をちょっとだけカスタマイズするCSSの書き方をご紹介します。

drawer.cssをCDNで読み込んでることもあると思うので、基本的にdrawer.cssを直接編集するのではなく、自分のサイトのCSSファイルで上書きすることを前提とします。
ちなみにCSSは後から読み込んだもので上書きされるので、HTMLの中でdrawer.cssよりも下の行で自分のCSS（style.cssなど）を読み込めば上書きできます。

ハンバーガーアイコンの色を変更

三本線のアイコン（ハンバーガーアイコン）の色を変更します。

.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
    background-color: #aaa;
}

ハンバーガーアイコンの線の太さを変更

heightの値を変更すると線の太さが変更できます。

.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
    height: 3px;
}

ハンバーガーアイコンに背景色をつける

デフォルトの状態ではハンバーガーアイコンには背景色はなく、黒の三本線のみになってますが、サイトのデザインによってはこれだとシンプルすぎて視認性がイマイチなことがあります。
こういう時は三本線の後ろに背景色があるととても見やすくなることがあります。

.drawer-hamburger {
    background: #aaa;
}

ハンバーガーアイコンの位置調整

アイコンを右上に表示させてる場合は、以下のようにパディングのtopやrightを調整します。

.drawer-hamburger {
    padding-top: 10px;
    padding-right: 10px;
}

メニューを開いた時のバツ（X）印アイコンの位置変更

例えばドロワーメニューが右サイドから表示される設定にしてる場合は、メニューがスライドして出てくると「閉じる」を意味するバツ印アイコンも一緒にスライドし、表示されたメニューの左上あたりに移動する仕様になっています。
このバツ印アイコンの位置を動かさずに（最初ハンバーガーアイコンがあった位置に）表示するCSSです。

.drawer--right.drawer-open .drawer-hamburger {
    right: 0px;
}

ドロワーメニュー全体の背景色を変更

デフォルトの状態ではメニューの背景は白色ですが、これを変更するCSSです。

.drawer-nav {
    background: #aaa;
}

コンテンツ部分にかかる半透明の黒色の変更

ドロワーメニューが表示された時、メニューの外（ページのコンテンツ部分）は半透明の黒色で暗くなります。
この色や透明度は以下で変更できます。

.drawer-overlay {
    background-color: rgba(0, 0, 0, .2);
}

drawer.jsに関する役立つ情報

Pagetop