スマートフォンサイトでよく使われるメニューに三本線で表示されている「ハンバーガーメニュー」が挙げられます。 ハンバーガーメニューを実装するのはCSSとJavaScript、もしくはjQueryを使用することが多いですが、今回はもっと手軽にCSSのみで実装する方法を紹介いたします。 まずハンバーガーメニューとはスマートフォンサイトなどで用いられるメニューです。 三本線のアイコンがハンバーガーに見えるためそう名付けられました。この三本線のボタンをタップするとメニューが展開し、もう一度タップするとメニューが収納されます。 ハンバーガーメニューについては弊社ブログの過去記事「ハンバーガーメニューのメリット・デメリット」に詳しくまとめてありますのでご覧ください。 コーディングで実装する際は、この三本線のボタンとメニューの二つの要素を記述します。 ボタンが一度タップされているかどうかを判断し、一度タッ
![JavaScript不要!CSSだけでハンバーガーメニューを実装する方法 | ビジネスとIT活用に役立つ情報(株式会社アーティス)](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c2673c7441d4ff8b4fdd9a679777ca761d96a1b/height=288;version=1;width=512/https%3A%2F%2Fwww.asobou.co.jp%2Fblog%2Fwp-content%2Fuploads%2F2020%2F12%2Fcss-menu.jpg)