いまや、スマホ対応サイトにハンバーガーメニューは必須となりました。
しかし、いちいちゼロから作るのは面倒ですよね。
忙しい方のために、コピペで作れるハンバーガーメニューを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で色を変えるだけでもかなり印象が変わるので、色々と編集してみてください。
スマホ対応サイト作成にぜひ役立ててくださいね！
