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

goto_jp 5,832views 更新:2014年1月28日

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切り替えのスイッチに使えることになります。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません