こんにちは。アプリコットデザインのこばです。
先輩コーダーかずさんのブログに乗っかり、CSSだけで作ってみよう企画第一弾。
今回はハンバーガーメニューです。
クリックするとメニューが表示されるコレ↓です。
スマホなど、画面領域の狭いデバイスで、クリックすると他のページへの導線などが表示される機能です。名前は知らなくても、皆さん感覚的に普段使っていると思います。メジャーな方法としては、JavaScriptやjQueryを使って実現するケースが多いですが、実はこちらはhtmlとcssだけで実装できてしまいます。
それがこちら。🍔をクリックするとメニューが出たり引っ込んだりします。
See the Pen
CSS ハンバーガーメニュー by koba-ottoworks (@koba-ottoworks)
on CodePen.
という流れです。
チェックボックスがチェックされているかどうかは「:checked」で判定しています。
また、cssでは「+」を使って兄弟要素を指定することができます。
css数行で済むので実装は簡単ですが、ボタンや切り替えるコンテンツのアニメーションによっては、javascriptの方がカスタマイズ性は高いです。
ちなみにちょっと手を加えると、タブ切り替えにも応用できます。
html,cssは書けるようになったけど、javascriptは・・・という方はぜひ試してみてください。
それではまた！
JOURNALが気に入ったら「いいね」してね！
↓
②チェックボックスのオンオフによってメニューが表示