CSSで作るハンバーガーメニュー

こんにちは。アプリコットデザインのこばです。

先輩コーダーかずさんのブログに乗っかり、CSSだけで作ってみよう企画第一弾。

今回はハンバーガーメニューです。
クリックするとメニューが表示されるコレ↓です。

スマホなど、画面領域の狭いデバイスで、クリックすると他のページへの導線などが表示される機能です。名前は知らなくても、皆さん感覚的に普段使っていると思います。メジャーな方法としては、JavaScriptやjQueryを使って実現するケースが多いですが、実はこちらはhtmlとcssだけで実装できてしまいます。

それがこちら。🍔をクリックするとメニューが出たり引っ込んだりします。

という流れです。

チェックボックスがチェックされているかどうかは「:checked」で判定しています。
また、cssでは「+」を使って兄弟要素を指定することができます。

css数行で済むので実装は簡単ですが、ボタンや切り替えるコンテンツのアニメーションによっては、javascriptの方がカスタマイズ性は高いです。
ちなみにちょっと手を加えると、タブ切り替えにも応用できます。

html,cssは書けるようになったけど、javascriptは・・・という方はぜひ試してみてください。

それではまた！