動くCSSのためのメモ。
ドロワーメニュー

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

開閉する仕組み

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

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

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

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

そして、スイッチの役割となる<input type="checkbox">は、コンテンツの先頭に設置。

ニュッと出るメニューとそのページ全体の構造

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

メニューがニュッと出て、コンテンツも右へスライド

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

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

pointer-events: noneでマウスイベントが無効になるので、前面を覆っていても、その下のコンテンツには触ることができるんですねー:D

ページトップへ戻る

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

上のサンプルみたいなメニューは、画面の幅が狭い時だけ使えればよくて、通常は普通のメニューを表示させときたいって時もあるでしょう。
そんな時はMedia Queriesメディアクエリという構文を使います。メディアクエリとは、メディアの特性に合わせてスタイルを出し分けるための方法。詳しくは後述
例えば、下記のように指定すれば、通常はメニューを開閉するボタンを非表示にしておいて、画面の横幅が480px以下の時だけ表示するようになります。

.open {
	display: none;
}
@media screen and (max-width: 480px) {
	.open {
		display: block;
	}
}

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

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

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

display: noneじゃなくて、要素の透明度や位置を変更して、それぞれtransitionを指定してアニメーションしてみました。

ページトップへ戻る

Comment & Pingback

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください