サンプルはこちら。
See the Pen CSS only drawer menu by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
以前作ったものをソース的により合理的に、かつ見た目もそれっぽく直したものです。
HTML
<input type="checkbox" class="check" id="check" />
<div class="menu">
<label for="check" class="btn"><i class="fa fa-bars"></i></label>
<ul>
<li><a href="#"><i class="fa fa-globe"></i>About</a></li>
<li><a href="#"><i class="fa fa-desktop"></i>Product</a></li>
<li><a href="#"><i class="fa fa-camera"></i>Gallery</a></li>
<li><a href="#"><i class="fa fa-users"></i>Support</a></li>
</ul>
</div>
<label for="check" class="cbtn"></label>
<div class="contentBody">
～
</div>要点は1行目のチェックボックスです。
このチェックボックスの「checked」セレクタを使うことで表示のON/OFFを切り替えることになります。
また3行目の<label>と11行目の<label>で、同じチェックボックスを対象にしています。
最初の「btn」の<label>は画面左上に表示されているメニュー展開用のボタン。
後の「cbtn」の<label>はメニュー展開時に画面全体を覆う半透明のレイヤーとして表示し、メニュー外を空クリックすることで閉じるといったアクションに対応させるためです。
唯一の課題は、文書的にチェックボタンは全く不要なのでそこは考慮の余地がありそうです。
CSS
全文はサンプル画面で見れるので要点部分だけ抜粋します。
.menu {
～
left: -250px;
～
}
.check:checked ~ .menu {
left: 0px;
}
.check:checked ~ .cbtn {
display: block;
}
.check:checked ~ .contentBody {
-webkit-filter: blur(1px);
filter: blur(1px);
}「.menu」は平常時は画面外にはみ出る形で「left:-250px」と設定し、「.check」がチェック状態になった際に「left:0px」と戻る形にすることでドロワーメニューを表現しています。
画面を覆うレイヤーの「.cbtn」も同様で、「.check」がチェック状態の際に表示するようにしています。
また同様にチェックされている際に「.contentBody」にblurをかけてぼかしています。
「:checked」セレクタと「~」セレクタの組み合わせで、JavaScriptで行われていたような表現をCSSだけで行えるようになります。
（古いIEはお察しで…）
