CSS3 :checked のみでメニューリストを作る方法 – CSS3 Checkbox Menus

こんにちは Honma です。今回は CSS3 で追加されたセレクタ「:checked」でチェックボックスを判定し、リストメニューを実装する方法の紹介です。

デモページ を用意したので、まずはそちらで確認して頂けたらと思います。

HTML

<div id=”checkbox-menu”>
	<input type=”checkbox” id=”checkbox” name=”check” value=”” />
	<label for=”checkbox”></label>
		<nav id=”list”>
			<ul>
				<li>List 1</li>
				<li>List 2</li>
				<li>List 3</li>
				<li>List 4</li>
				<li>List 5</li>
			</ul>
		</nav>
</div>

こちらが HTML 部分。特に珍しいところはありませんが、ラベルをボタン代わりに使うのと「+ (隣接セレクタ)」を使うためにラベルとリストを隣合せていることを覚えておいてください。

CSS

/* チェックボックスを非表示にする */
input[type="checkbox"] {
	visibility: hidden;
}
#checkbox-menu {
	position: relative;
	width: 48px;
	height: 48px;
	margin: 0 auto;
}
/* ラベル (ボタン) のデザイン */
#checkbox-menu label {
	display: block;
	position: absolute;
	top: 0;
	width: 48px;
	height: 48px;
	cursor: pointer;
	-webkit-transition: all .25s ease-in-out 0s;
	   -moz-transition: all .25s ease-in-out 0s;
	    -ms-transition: all .25s ease-in-out 0s;
	     -o-transition: all .25s ease-in-out 0s;
	        transition: all .25s ease-in-out 0s;
}
#checkbox-menu label:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%; left: 0;
	margin-top: -1.5px;
	width: 100%;
	height: 3px;
	background: #19283C;
	-webkit-transition: all .25s ease-in-out 0s;
	   -moz-transition: all .25s ease-in-out 0s;
	    -ms-transition: all .25s ease-in-out 0s;
	     -o-transition: all .25s ease-in-out 0s;
	        transition: all .25s ease-in-out 0s;
}
#checkbox-menu label:after {
	content: "";
	display: block;
	position: absolute;
	top: 0; left: 50%;
	margin-left: -1.5px;
	bottom: 0;
	width: 3px;
	height: 100%;
	background: #19283C;
	-webkit-transition: all .25s ease-in-out 0s;
	   -moz-transition: all .25s ease-in-out 0s;
	    -ms-transition: all .25s ease-in-out 0s;
	     -o-transition: all .25s ease-in-out 0s;
	        transition: all .25s ease-in-out 0s;
}
#checkbox-menu input[type="checkbox"]:checked + label {
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}
#checkbox-menu input[type="checkbox"]:checked + label:before,
#checkbox-menu input[type="checkbox"]:checked + label:after {
	background: #B21D2D;
}
/* リストのデザイン */
#list {
	position: absolute;
	top: 70px; left: 50%;
	margin-left: -150px;
	width: 300px;
	height: auto;
	background: #19283C;
	visibility: hidden;
	opacity: 0;
	border-radius: 8px;
	-webkit-transition: all .25s ease-in-out 0s;
	   -moz-transition: all .25s ease-in-out 0s;
	    -ms-transition: all .25s ease-in-out 0s;
	     -o-transition: all .25s ease-in-out 0s;
	        transition: all .25s ease-in-out 0s;
	-webkit-transform: translate3d(0, -15px, 0);
	   -moz-transform: translate3d(0, -15px, 0);
	    -ms-transform: translate3d(0, -15px, 0);
	     -o-transform: translate3d(0, -15px, 0);
	        transform: translate3d(0, -15px, 0);
}
#list:after {
	content: "";
	position: absolute;
	top: -10px; left: 50%;
	margin-left: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #19283C transparent;
}
#list li {
	width: 100%;
	height: 50px;
	padding: 0 20px;
	font-size: 13px;
	color: #F6F6F6;
	line-height: 50px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	     -o-box-sizing: border-box;
	       -box-sizing: border-box;
}
/* ラベルにチェックが入ったときにリストを表示 */
#checkbox-menu input[type="checkbox"]:checked + label + #list {
	background: #19283C;
	visibility: visible;
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	   -moz-transform: translate3d(0, 0, 0);
	    -ms-transform: translate3d(0, 0, 0);
	     -o-transform: translate3d(0, 0, 0);
	        transform: translate3d(0, 0, 0);
}

こちらは CSS 部分。最初にチェックボックス自体は visibility: hidden; で非表示にしラベルを装飾、input[type=checkbox]:checked + label + #list 部分でチェック時のみリストをフェードインさせています。こうすることで JavaScript を使わなくても簡単にメニューリストを実装することが可能です。

:checked の疑似セレクタは今回紹介した方法以外にもいろいろな場面で使えそうなので、みなさんも是非試してみてください！

以上です。