HTMLとCSSでスマホ用メニュー

レスポンシブなナビゲーションをjQueryとかを使わずにhtmlとcssのみで実現する。

cssセレクタには:activeがあるがこれはクリックしている時だけの設定で、今回は一度クリックしたらもう一度クリックするまで状態を維持したい。

その為には一般的にはフォーム内で利用する、チェックボックスを利用すると実現します。
チェックボックス用の疑似クラスには「:checked」が利用できるのでそれを利用します。

&lt;nav&gt;
&lt;label for=”menubox” id=”menulabel”&gt;
&lt;span&gt;menu&lt;/span&gt;
&lt;input name=”menubox” type=”checkbox” value=”” id=”menubox”&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=”#”&gt;menu1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=”#”&gt;menu2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=”#”&gt;menu3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=”#”&gt;menu4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=”#”&gt;menu5&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/label&gt;
&lt;/nav&gt;

<nav>

<ul>

</ul>

</label>

</nav>

htmlでは「label」タグを使用して全体を囲む。そしてその中の「menu」の文字はspanタグで囲みます。
そしてその下にチェックボックスとULを配置

後はCSSでレスポンシブとしますが、「#menubox:checked + ul 」のセレクタでチェックボックスにチェックが入っている時のみの、直下のULを制御しています。

@media screen and (max-width: 650px) {
header #menulabel span {
display: block;
}
#menubox:checked + ul {
display: block;
}
header ul {
display: none;
clear:both;
}
header ul li {
float: none;
}
header ul li a {
width:auto;
}
}