JavaScriptなしのハンバーガーメニュー

reference_site_2

スマホサイトの制作と共に基本となったハンバーガーメニュー。コードベースでは実現は簡単にできるのですが、カスタマイズのために実装するとなるとこれまた一苦労。

JavaScriptとCSSを使って実装するのが一般的だけど、今回なぜか上手く実装できず、いろいろと探しているときにCSSのみで実現している記事に出会いました!

それが株式会社アーティスさんの「JavaScript不要!CSSだけでハンバーガーメニューを実装する方法」。チェックボックスのオンオフをトリガーとしてハンバーガーメニューの動きを付けるというもの。

当初チェックボックスがなぜあるのか???だったのですが、何度もコードを確認して「わかった!」となり、動きを付けることができました。

今回本当にいろいろな情報サイトにお世話になりました。ありがとうございました。