【コピペでOK】簡単シンプルなハンバーガーボタンの作り方【CSS, jQuery】

man

困ってる人

ハンバーガーボタンって、一体どうやって作ればいいんだろう?
あんまり難しい事はやりたくないからコピペでいければ嬉しいんだけど


こんにちは、よろと申します。

今回は、基本的なハンバーガーボタンの作り方という事で、

過去にいろいろなサイトを見て、ハンバーガーボタンの作り方に関して調べてみた事があるのですが、

サイトの内容によっては、自分で真似してやってみても全く動かないものがあったり、

やけにコードが細かく難しかったりと困った覚えもあったので、

今回、自分用のバックアップという事も兼ねて、比較的シンプルなものをご紹介。


【コピペでOK】比較的シンプルなハンバーガーボタンの作り方 – HTML

比較的シンプルなハンバーガーボタンの作り方 – CSS

比較的シンプルなハンバーガーボタンの作り方 – JavaScript(jQuery)

※toggleClassはクラスがついてなかったら追加、ついていたら外すといったもの

そして、その結果がこちら(ハンバーガーアイコンをクリックしてみて下さい)

See the Pen
RdMrZM
by みあろぐ / mialog (@malg_tw)
on CodePen.

という事で、比較的シンプルなハンバーガーボタンの作り方という事だったのですが、

今回紹介したコードの中の数字を触ってみる事で色やサイズはもちろん、多少は面白い動きのボタンも作れたりします。

これ以外にもハンバーガーボタンの作り方というのは沢山ありますし、動きももっと細かく見た目も面白いものも、

ネット上を探せばいくらでも出てきますので、ぜひいろいろと見てみて下さい。

普通に使うだけであれば、こちらのコードを全てコピペで事足りるかと思います。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール