コロナ騒動のため、親子で餃子作りが流行っているということなので、ソロで色々なハンバーガーボタンを作ってみました。ハンバーガーボタンなら愛くるしい子供がいない、むさ苦しいおっさんでも作れて安心です。材料が売り切れで困ることがないどころか、材料費0円です。

ネタっぽいふいんき（変換できないぞ！）だけど、実用的な記事だぞ！

FontAwesome産ハンバーガーボタン

FontAwesomeでクリックすると≡、×、≡...と変化していくハンバーガーボタンです。シンプルで1番簡単です。

See the Pen Font Awesome ハンバーガーボタン by Kei_lvngbk (@Kei_lvngbk) on CodePen.

擬似要素を使用して、CSSでFont Awesomeのアイコンの設定をしています。アイコンのユニコードは、アイコンのページに載っています（例えば、≡ならBars Iconのページ）。詳しい使い方はFont Awesomeの擬似要素のドキュメントに書いてあります。

JSは、単純にクリックに応じてクラスを付け替えてアイコンの表示を切り替えています。

CSS産ハンバーガーボタン

クリックするとアイコンが回るハンバーガーボタンです。

See the Pen 回転ハンバーガーアイコン by Kei_lvngbk (@Kei_lvngbk) on CodePen.

position: abosolute;で作った棒の上下に擬似要素（::before、::after)で棒を表示し、ハンバーガーボタンを作ります。クリックで擬似要素をtop: 0;でアイコンの中心に戻しつつ、棒を回転させます。

CSS100%のハンバーガーボタン

JSでクラスを切り替えないハンバーガーボタンです。チェックボックスを利用します。

See the Pen JSを使わないハンバーガーボタン by Kei_lvngbk (@Kei_lvngbk) on CodePen.

チェックボックス自体は表示を隠し、ラベルをアイコンに使っています。そして、擬似クラスの:checkedを使い、クリックされたときのハンバーガーアイコンの挙動をスタイリングします。