cssだけで作ったドロワーメニュー

checkboxを使う事でcssだけでクリックイベントを使う事が出来ます。

<header>
<h1>タイトル</h1>
<input type="checkbox" id="check">
<label for="check" class="ham">
<p class="ham-btn"><span></span></p>
</label>
<nav class="g-nav">
<ul>
<li><a href="#">ボタン1</a></li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
<li><a href="#">ボタン4</a></li>
</ul>
</nav>
</header>
<div class="main">
<p class="txt">コンテンツ</p>
</div>

See the Pen
cssでドロワーメニュー by yachin29 (@yachin29)
on CodePen.

See the Pen
cssでslideメニュー by yachin29 (@yachin29)
on CodePen.