CSS3：CSSだけで作るドロワーメニュー

CSS3の checked セレクタと隣接セレクタ(+)を活用することで、CSSだけで下記サンプルのようなメニューが作れます。

http://jsdo.it/goto_jp/2NnW

大雑把には下記のHTML構成を前提とします。

<div class="menu">
 <label for="check" class="btn">Menu</label>
 <input type="checkbox" class="check" id="check" />
 <ul>
 ～
 </ul>
</div>

CSSのキモの部分は下記です。

.menu .check:checked + ul {}

「.check」がチェック状態かつ、それに隣接する <ul> に対してのセレクタの記述です。

checked セレクタを活用することで、JavaScriptを使うことなくチェックボックスをCSS切り替えのスイッチに使えることになります。