Wordpress

クリックすると変化する三本線のハンバーガーボタンの作り方【WordPress】【CSS】

  1. HOME >
  2. Wordpress >

クリックすると変化する三本線のハンバーガーボタンの作り方【WordPress】【CSS】

クリックすると変化する三本線のハンバーガーボタンの作り方

ハンバーガーボタンの作り方

  • オリジナルのハンバーガーメニューボタンを作りたい。
  • メニュー開閉時に、アイコンに動きをつけたい。
  • 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.

線の位置をこのように調整。注意点として赤線を下線か上線にする必要があります。バッテンボタンに変更するときに赤線が変更の基準となるため、1本線を消すには擬似要素の方が都合がよいです。

 

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に他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.

 

もっと詳しく

 

まとめ

お疲れ様でした。

HTMLで空の「span」タグを作成し、CSSで線を作成することで、checked属性が付与されたときに、スタイルを変更できるようになります。:checked擬似クラスを使用したこの方法は、テキストの変更にも応用できるので、皆様もいろいろ試しに作成してみると面白いと思います。

最後まで、ご一読いただきありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.