ハンバーガーボタンの作り方
- オリジナルのハンバーガーメニューボタンを作りたい。
- メニュー開閉時に、アイコンに動きをつけたい。
- HTMLとCSSで作れるものにしたい。
ココがポイント
結論：
「::before」「::after」の擬似要素を使うことで、ハンバーガーボタンの三本線から、閉じるボタンのバッテンに変化をつけられる。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
皆様は、Webページを作成していると、ハンバーガーボタンを作成してメニューを開閉できるアイコンにしたいと思ったことはございませんか？
今回は、クリックするとバッテンにも変化するハンバーガーボタンをHTMLとCSSだけで簡単に作れる方法をご紹介しようと思います。
目次
1.ハンバーガーボタンの線の位置を調整
See the Pen
test_border_check by 三好雄介 (@yusuke5028198)
on CodePen.
「span」タグの中央が赤線、「::before」が緑線、「::after」が青線になります。
「::before」の要素だけ、「span」タグの要素と位置がかぶるため線の太さ分だけ移動しておりますが、3本線の位置関係はこのようになっているので、自身でカスタマイズする際の参考にしてください。
See the Pen
under_line_customize by 三好雄介 (@yusuke5028198)
on CodePen.
線の位置をこのように調整。注意点として赤線を下線か上線にする必要があります。バッテンボタンに変更するときに赤線が変更の基準となるため、１本線を消すには擬似要素の方が都合がよいです。
2.コードをコピペして、サイズをカスタマイズ
好みのアクションのコードをコピペして、「1.ハンバーガーボタンの線の位置を調整」を参考にアイコンのサイズをカスタマイズすればOK。
2.Type1_ノーマルなアイコン変化
See the Pen
hamburger_button_1 by 三好雄介 (@yusuke5028198)
on CodePen.
2.Type2_色変更
See the Pen
hamburger_button_5_color by 三好雄介 (@yusuke5028198)
on CodePen.
2.Type3_大きさ変更
See the Pen
hamburger_button_6_scale by 三好雄介 (@yusuke5028198)
on CodePen.
3.ハンバーガーボタンの線の太さがある程度太いとき
「span」タグの要素を縮小することで、回転アクションをきれいにしています。ある程度線の太さがないと、消す線を隠しきれないことが気をつける点です。
See the Pen
test_border_check_new by 三好雄介 (@yusuke5028198)
on CodePen.
上記のように中央を1/4に他４倍にしています。
3.Type4_X軸方向に回転
See the Pen
hamburger_button_new_2_x by 三好雄介 (@yusuke5028198)
on CodePen.
3.Type5_y軸方向に回転
See the Pen
hamburger_button_new_2_y by 三好雄介 (@yusuke5028198)
on CodePen.
3.Type6_z軸方向に回転
See the Pen
hamburger_button_new_3_z by 三好雄介 (@yusuke5028198)
on CodePen.
もっと詳しく
CSSだけで簡単に「ハンバーガーメニューボタン」が作れる方法について詳しく書かれている記事です。
まとめ
お疲れ様でした。
HTMLで空の「span」タグを作成し、CSSで線を作成することで、checked属性が付与されたときに、スタイルを変更できるようになります。:checked擬似クラスを使用したこの方法は、テキストの変更にも応用できるので、皆様もいろいろ試しに作成してみると面白いと思います。
最後まで、ご一読いただきありがとうございました。
