ハンバーガーメニュー展開時に背景を暗く！CSSデザイン例を解説
ハンバーガーメニューを開いた際に背景を暗くする方法について解説します。
CSSのみで手軽に実装できるため、ある程度HTML/CSSについて知識のある方であれば簡単に導入可能です。
ハンバーガーメニュー展開時にコンテンツ側の背景を暗くすることで、メニューの内容に意識を集中してもらいやすくなるため、ユーザーにとって見やすいデザインを作ることができます。
ハンバーガーメニュー背景を暗くする
ハンバーガーメニューの背景を暗くする方法として最も導入しやすいのは、グレーの背景用として新たなHTML要素を追加する手法です。
既存の要素に対してCSSの疑似要素のみを追加することでハンバーガーメニューの背景を暗くする方法もあるのですが、ハンバーガーメニューを構成するコードによって変更箇所が異なり説明しづらいため、今回はHTML要素を追加する方法をご紹介します。
背景を暗くした完成形のデモ
「メニューを開いた際に背景が暗くなるハンバーガーメニュー」の完成形デモです。
その他のハンバーガーメニュー･デザインも別ページにてご紹介しているので、ぜひ併せてご覧ください。
メニューの背景を暗くする方法
ハンバーガーメニューの背景を暗くするために、HTML要素を追加し、CSSで画面全体に対してグレーのカバーがかかるよう設定していきます。
ハンバーガーメニューと背景のコード例
メニュー展開時に背景が暗くなるハンバーガーメニューのHTMLとCSSコードは下記のとおりです。
HTMLコード
デモ用のヘッダーやサイトタイトルのサンプルHTMLコードを含みます。
実際のハンバーガーメニューは、<div class="hamburger-demo-menubox">内（コメントアウトの「ハンバーガーメニューここから」から「ハンバーガーメニューここまで」まで）です。
<div class="demobox-header"> <span class="demobox-sitename">SiteName</span> <!-- ↓ハンバーガーメニューここから↓ --> <div class="hamburger-demo-menubox"> <input id="hamburger-demo1" type="checkbox" class="input-hidden"> <label for="hamburger-demo1" class="hamburger-demo-switch hamburger-demo-switch1"> <span class="hamburger-switch-line1-before"></span> <span class="hamburger-switch-line1"></span> <span class="hamburger-switch-line1-after"></span> </label> <div class="hamburger-demo-menuwrap"> <ul class="hamburger-demo-menulist"> <li><a href="#">メニューリスト１</a></li> <li><a href="#">メニューリスト２</a></li> </ul> </div> <div class="hamburger-demo-cover"></div> </div> <!-- ↑ハンバーガーメニューここまで↑ --> </div>
CSSコード
デモ用のヘッダー周りCSSに関しては、参考までに記載しています。
コードの前半に記載されている「全体調整CSS」は、既存のCSSによるデザイン崩れを防止するためのコードです。
/* header（デモの参考値） */
.demobox-header{
background: #ddd;
height: 64px;
padding: 1em;
}
/* headerのサイト名（デモの参考値） */
.demobox-sitename{
font-weight: 700;
font-size: 18px;
}
/* 全体調整CSS */
.hamburger-demo-menubox *{
font-size: 16px;
}
.hamburger-demo-menubox li{
font-size: 14px;
}
/* hamburgerここから */
/* inputを非表示 */
.input-hidden{
display: none;
}
/* label */
.hamburger-demo-switch{
cursor: pointer;
position: absolute;
right: 3%;
top: 0; /* ハンバーガーアイコンの位置（上から） */
z-index: 9999;
width: 4em; /* アイコン（クリック可能領域）の幅 */
height: 4em; /* アイコン（クリック可能領域の）高さ */
}
/* メニュー展開時にハンバーガーアイコンを固定 */
#hamburger-demo1:checked ~ .hamburger-demo-switch{
position: fixed;
}
/* ハンバーガーアイコン */
.hamburger-switch-line1, .hamburger-switch-line1-before, .hamburger-switch-line1-after{
width: 25px;
height: 3px;
background: #333; /* ハンバーガーアイコンの色 */
position: absolute;
top: 50%;
left: 50%;
transition: .3s;
content: "";
}
.hamburger-switch-line1{
transform: translate(-50%, -50%);
}
.hamburger-switch-line1-before{
transform: translate(-50%, -300%);
}
.hamburger-switch-line1-after{
transform: translate(-50%, 200%);
}
/* ハンバーガーアイコン･アニメーション */
#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1{
width: 0;
}
#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1-before{
transform: rotate(45deg) translate(-40%, 325%);
}
#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1-after{
transform: rotate(-45deg) translate(-40%, -325%);
}
/* メニューエリア */
.hamburger-demo-menuwrap{
position: fixed;
height: 100%;
background: #fafafa; /* メニューエリアの背景色 */
padding: 5em 3% 2em;
z-index: 9998;
transition: .3s;
overflow-y: scroll; /* メニュー内容が多い場合に縦スクロールする */
top: 0;
left: 100%;
width: 70%;
}
/* メニューリスト */
.hamburger-demo-menulist{
margin-right: 3%;
padding-left: 5% !important; /* !important不要な場合もあり */
list-style: none;
}
.hamburger-demo-menulist li a{
text-decoration: none;
color: #333; /* メニューリストの文字色 */
display: block;
padding: .5em 0;
}
/* メニューエリア･アニメーション */
/* 右から */
#hamburger-demo1:checked ~ .hamburger-demo-menuwrap{
left: 30%;
}
/* コンテンツカバー */
#hamburger-demo1:checked ~ .hamburger-demo-cover{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9997;
background: rgba(3,3,3,.5);
display: block;
}
/* PCではハンバーガーメニューを表示しない */
@media (min-width: 992px){
.hamburger-demo-menubox{
display: none;
}
}背景を暗くするカバーのポイント
ハンバーガーメニューを開いたときに背景を暗くするカバーは、上記のコード内の<div class="hamburger-demo-cover"></div>の部分です。
ハンバーガーメニューのHTML内に背景専用の空要素を記述しています。
また、CSSにて“position: fixed; top: 0; left: 0;"を用いて画面全体を覆うカバーを作り、半透明の背景色を指定することでコンテンツ側を暗くすることができます。
z-indexで要素の重なり順を指定し、ハンバーガーメニューのメニュー項目よりも下に配置することで、メニューだけが最前面に浮き出る形を作りましょう。
背景クリックでメニューを閉じる場合
ハンバーガーメニューの背景として<input>タグに対応する<label>タグを使用すれば、背景カバーをクリックすることでハンバーガーメニューを閉じることが可能になります。
詳しくは、下記ページにて３番目にご紹介しているハンバーガーメニューのHTML/CSSコードを参照してください。
ハンバーガーメニューでUX向上
ハンバーガーメニューの背景を暗くすることで、ユーザーがメニュー内容に集中しやすくなります。
Webサイトを運営する際には、ユーザーにとっての使いやすさや見やすさを追求していきたいものです。
デザイン性や機能性が高まることでユーザー･エクスペリエンスが向上し、平均滞在時間が長くなれば、SEO効果も期待できます。
スマートフォンからの閲覧者が増加している今の時代だからこそ、ハンバーガーメニューのデザインや使いやすさにはこだわりたいところです。