ドロワーメニュー

2014.6.5 Thu. 2021.11.26 Fri.

ページの隅っこにある（にほんせん）や（さんぼんせん）のアイコンをタップするとメニューがスライドしてくるの、よく見かけますね。引き出しみたいに出し入れできるメニューだからドロワーメニューとかって言います。ここではそんなドロワーメニューをCSSで作ってみます。

開閉する仕組み

メニューが開閉する仕組みは、これまでのサンプル同様<input>と<label>を使った方法で、今回はラジオボタンじゃなくて、チェックボックスを使います:)。

ページ全体のHTMLの構造は以下の通り。

<body>
	<input type="checkbox" id="drawer">
	<label for="drawer" class="open"></label>
	<label for="drawer" class="close"></label>
	<nav class="menu">
		⋮
	</nav>
	<div class="contents">
		<header>
			⋮
		</header>
		<article>
			⋮
		</article>
		<footer>
			⋮
		</footer>
	</div>
</body>

メニューを開閉するためのボタンとなるlabel要素は2つ用意しておき、ひとつは開く・閉じるの両用、もうひとつを閉じる用としておきます。
両用の<label for="drawer" class="open">は、常に見えているボタンの形をしたもの。閉じる用の<label for="drawer" class="close">は、全面を覆うように固定配置しておきます。

そして、スイッチの役割となるチェックボックスは、ページの先頭に設置。

これが:checkedになった時に、それ以降の兄弟要素<label>と<nav>のスタイルを変える仕組みです。

全面を覆っている閉じるボタンは、メニューが閉じている時はpointer-events: noneでポインターでの操作を無効にしておき、メニューが開いた時にはautoにして、クリックできるようにします。スライドショーの矢印ボタンの時と同じ方法ですね;)。

.close {
	z-index: 1;
	inset: 0;
	pointer-events: none;
	transition: background-color .6s;
}
#drawer:checked ~ .close {
	pointer-events: auto;
	background-color: rgba(0,0,0,.3);
}

pointer-events: noneでポインターイベントが無効になるので、前面を覆っていても、その下のコンテンツには触ることができるってわけ:D。

ドロワーメニューが開いたらスクロールをロックする

ドロワーメニューが開いている時には、下のコンテンツのスクロールを止めたいって時もあるでしょう。そんな時には、以下のように、ページ全体をひとつのdiv要素で括って、その要素内でスクロールするようにします。

<body>
	<div class="container">
		<input type="checkbox" id="drawer">
		<label for="drawer" class="open"></label>
		<label for="drawer" class="close"></label>
		<nav class="menu">
			⋮
		</nav>
		<div class="contents">
			⋮
		</div>
	</div>
</body>

body要素の内側のdiv要素.containerに、以下のようにスタイルを指定すれば、html要素ではスクロールしなくなり、.container内でスクロールするようになります。

.container {
	position: absolute;
	inset: 0;
	overflow: auto;
}

そうすると、ドロワーメニューが開いた時に、閉じるボタン用のlabel要素がページ全体を覆っている故（ゆえ）、下のコンテンツに触れなくなって、スクロールもできなくなります:o。

ウィンドウの幅に合わせてメニューを使い分ける

ドロワーメニューは、画面が狭い時だけ使えればよくて、画面が広い時にはコンテンツ内にメニューを表示させときたいって時もあるでしょう。
そんな時はMedia Queriesメディアクエリという構文を使います。メディアクエリとは、メディアの特性に合わせてスタイルを出し分けるための方法。詳しくは後述。
例えば、以下のように指定すれば、画面の横幅が520px以上の時にはドロワーメニューのアイコンが非表示になり、画面の横幅が519px以下の時にはコンテンツ内のメニューが非表示になります。

@media (min-width: 520px) {
	.open {
		display: none;
	}
}
@media (max-width: 519px) {
	header nav {
		display: none;
	}
}

上のサンプルでは、メディアクエリを使って、ブラウザの横幅に合わせて、普通なメニューを表示するスタイルと、ドロワーメニューを表示するスタイルを出し分けてるということになります。
ブラウザの横幅を狭くしていくと、コンテンツ内のメニューが消えて、ドロワーメニューのアイコンが現れます。

パッと切り替わるより、もうちょっと自然な感じに切り替わるようにしてみたいですね。CSSの指定を以下のように変えてみます。

.open {
	transform: translate(0, -100%);
}
#drawer:checked + .open {
	transform: translate(250px, 0);
}
@media (max-width: 480px) {
	.open {
		transform: translate(0, 0);
	}
}

display: noneで急に消すんじゃなくて、要素の透明度や位置を調整して隠すようにしてみました。それぞれtransitionプロパティを指定してゆっくり隠れるようにしています。

メディアクエリについて

こんな風に書きます。

@media screen and (max-width: 519px) {
	/* この中にふつうにスタイルを記述する */
}

screenの部分がメディアタイプ、andを挟んで、()の中身がメディア特性です。
それぞれ分けて解説してみますね！

メディアタイプ

@mediaという構文を使うと、HTMLを表示しているメディアのタイプを条件に、適用されるCSSを分ける事ができます。メディアのタイプにはprintとか、projectionとかtvとかが用意されていて、@mediaの後に半角スペースを空けて記述します。
例えば下記のように書くと、印刷物や、印刷プレビューの時だけ適用されるスタイルが書けます。

@media print {
	/* この中に書いたスタイルは、印刷物や、印刷プレビューの時にしか適用されない */
}

メディア特性

メディアタイプの後にandで繋げて、括弧の中に条件を追加することができます。この括弧の中には、色数とか、高さや横幅、横向きか縦向きかなど、指定したメディアの特性を指定する事ができます。
例えば下記のように指定すれば、印刷する範囲が横幅10cm以下の時だけ適用されるスタイルになります。

@media print and (max-width: 10cm) {
	/* この中に書いたスタイルは、印刷する範囲が横幅10cm以内の、印刷物や、印刷プレビューの時にしか適用されない */
}

そんなこんなで、前述の@media screen and (max-width: 519px) {}ならば、メディアタイプがディスプレイ画面で、コンテンツの表示範囲が横幅480px以下の時だけ適用されるスタイルが書けるってことになるわけですね！

よく使われるメディアクエリ

Webサイトをつくる時によく使うのは、以下の2種類だと思います！

@media (max-width: 519px) {
	header nav {
		/* ここに書いたスタイルは、画面（ブラウザのウィンドウ）の横幅が最大519pxの時まで適用される */
		/* ※つまり519pxより大きい（519px以上）時は適用されない */
	}
}
@media (min-width: 520px) {
	header nav {
		/* ここに書いたスタイルは、画面（ブラウザのウィンドウ）の横幅が最低520pxの時まで適用される */
		/* ※つまり520px未満（519px以下）の時は適用されない */
	}
}

下のサンプルは、一行めの数字はJavaScriptで画面の横幅を取得して表示してて、下のテキストはCSSのcontentプロパティで表示させています。
ブラウザのウィンドウサイズを変えてみると、横幅が521px以上の時には「min-width: 520px」というテキストが表示され、519px以下の時には「max-width: 520px」というテキストが表示され、ちょうどぴったり520pxの時には両方のテキストが表示されるはずです。

パララックス