【月額4,980円】
最短3ヶ月でwebデザイナーになる

【2020年最新!コピペだけ!】おしゃれなハンバーガーメニュー【21個まとめ】

いまや、スマホ対応サイトにハンバーガーメニューは必須となりました。
しかし、いちいちゼロから作るのは面倒ですよね。

忙しい方のために、コピペで作れるハンバーガーメニューを21個まとめました。
7種類のボタンの動きと、メニューの出てくる動きが違うサンプルを用意しています。
「result」部分にあるハンバーガーメニューをクリックして、好きな動きの組み合わせを見つけてください!

コードをコピペすればそのまま使うことができます。
もちろんご自分好みにカスタマイズして使って頂いてもOKです。

1.基本のハンバーガーボタン

まずは一番ベーシックなボタンの動きです。
コーポレートサイトなどにオススメです。

ふわっと出てくるメニュー

See the Pen
シンプル全画面
by webpaisen (@webpaisen)
on CodePen.

上から出てくるメニュー

See the Pen
シンプル上から
by webpaisen (@webpaisen)
on CodePen.

横から出てくるメニュー

See the Pen
シンプル横から
by webpaisen (@webpaisen)
on CodePen.

2.回転して交差するハンバーガーボタン

ボタンを押すと、ぐるるんっと少し複雑な動きをします。

ふわっと出てくるメニュー

See the Pen
くるっと交差全体
by webpaisen (@webpaisen)
on CodePen.

上から出てくるメニュー

See the Pen
くるっと交差上から
by webpaisen (@webpaisen)
on CodePen.

横から出てくるメニュー

See the Pen
くるっと交差横から
by webpaisen (@webpaisen)
on CodePen.

3.クルッと回るハンバーガーボタン

右回りにクルッと回転するボタンです。

ふわっと出てくるメニュー

See the Pen
回転して全体
by webpaisen (@webpaisen)
on CodePen.

上から出てくるメニュー

See the Pen
回転して上から
by webpaisen (@webpaisen)
on CodePen.

横から出てくるメニュー

See the Pen
回転して横から
by webpaisen (@webpaisen)
on CodePen.

4.ころっと転がるハンバーガーボタン

一本一本のラインが独立して動く、面白いアニメーションです。

ふわっと出てくるメニュー

See the Pen
ころっと全体
by webpaisen (@webpaisen)
on CodePen.

上から出てくるメニュー

See the Pen
ころっと上から
by webpaisen (@webpaisen)
on CodePen.

横から出てくるメニュー

See the Pen
ころっと横から
by webpaisen (@webpaisen)
on CodePen.

5.矢印に変わるハンバーガーボタン

ちょっと珍しいので、ポートフォリオなんかにオススメです!

上から出てくるメニュー

See the Pen
矢印上から
by webpaisen (@webpaisen)
on CodePen.

右から出てくるメニュー

See the Pen
右から+矢印
by webpaisen (@webpaisen)
on CodePen.

左から出てくるメニュー

See the Pen
左から+矢印
by webpaisen (@webpaisen)
on CodePen.

6.マイナス記号に変わるハンバーガーボタン

シンプルなので、BtoBのサイトにピッタリです。

ふわっと出てくるメニュー

See the Pen
マイナス全体
by webpaisen (@webpaisen)
on CodePen.

上から出てくるメニュー

See the Pen
マイナス上から
by webpaisen (@webpaisen)
on CodePen.

横から出てくるメニュー

See the Pen
マイナス横から
by webpaisen (@webpaisen)
on CodePen.

7.閉じるボタンを丸で囲んだハンバーガーボタン

閉じるボタンが目立つので、ユーザーの「どうやって閉じるのかわからない」を防げますね。
少し対象年齢が高めのサイトに良いかもしれません。

ふわっと出てくるメニュー

See the Pen
丸がつく全体
by webpaisen (@webpaisen)
on CodePen.

上から出てくるメニュー

See the Pen
丸がつく上から
by webpaisen (@webpaisen)
on CodePen.

横から出てくるメニュー

See the Pen
丸がつく横から
by webpaisen (@webpaisen)
on CodePen.

まとめ

いかがでしたか?
CSSで色を変えるだけでもかなり印象が変わるので、色々と編集してみてください。
スマホ対応サイト作成にぜひ役立ててくださいね!