ハンバーガーメニューのCSSアニメーション 5選
ハンバーガーメニューって！？
WEBサイトを作るときはページとページを移動するためにメニューボタンを置くことがあります。
メニューボタンの中でも横棒でデザインされた「ハンバーガーメニュー」はよく使われているデザインの一つです。
今回は色んなデザインやアニメーションのハンバーガーメニューをご紹介したいと思います。
メニューボタンを押した後のアクションも含めていくつかのパターンを作成してみました。
WEB業界では、ハンバーガーメニューとは3本or2本の線を重ねてできたメニューボタンのことを言います。
WEBデザイナーは必ずと言っていいほど使う可能性が高いので、このページで覚えてみてください♪
わかりやすいように背景をカラフルにしています。
では一緒にみていきましょう。
よく読まれている記事
3本ラインを押すと上からスライドするメニューボタン
3本の線でできたメニューバーを押すと上からメニュー画面が下りてくるアニメーションです。
メニューボタンの形は変化しませんが、メニュー画面が下りるときに白から黒に切り替わります。
CSSの行数も少なく、初心者の方で試しに使ってみたい方におすすめです。
See the Pen
ハンバーガーボタンアニメーション by loa (@hana4525)
on CodePen.
3本ラインを押すとふわっと表示されるメニューボタン
丸で囲まれた3本線のメニューバーを押すとメニュー画面がふわっと表示されるアニメーションです。
メニューを押すと3本線が×へ形が変化することで、メニューを閉じる場所を視覚的に伝えることができます。
多くのWEBサイトでこのスタイルのハンバーガーメニューが使われています。
See the Pen
ハンバーガーボタンアニメーション by loa (@hana4525)
on CodePen.
長さが異なる3本ラインを押すと左からスライドするメニューボタン
階段状に長さの異なる3本線のメニューバーを押すとメニュー画面が左からするっと表示されるアニメーションです。
3本線の長さを変えたり、素早くメニューをスライドインさせることでスタイリッシュな印象がありますね。
使い勝手のいいサイトを作りたいときに使いたいメニューデザインです。
See the Pen
ハンバーガーボタンアニメーション by loa (@hana4525)
on CodePen.
3本ラインを押すと右へスライドするメニューボタン
四角で囲まれた3本線のメニューバーを押すとメニュー画面と一緒に右へスライド表示されるアニメーションです。
3本線をメニュー画面と一緒にスライドさせることで、上側にメニューを表示させることができ無駄なスペースを減らすことができます。
メニュー画面を効率的に使いたいときや遷移するページ数が多いときに使うと便利です。
See the Pen
ハンバーガーボタンアニメーション by loa (@hana4525)
on CodePen.
2本ラインを押すと×に変形するメニューボタン
2本線のメニューバーを押すと1本に変形した後に×に変形するよる少し複雑なアニメーションです。
2段階で変化するアニメーションはcssが少し長くなりますが、これだけでオリジナル感を出すことができます。
サイトに特別な印象を与えたいときや、レベルアップさせたいときに使える実装です。
See the Pen
ハンバーガーボタンアニメーション by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
ハンバーガーメニューをいくつかご紹介してきましたが、いかがでしたでしょうか？
最初は少しむずかしそうに見えますが、簡単なjsとcssを使うだけでいろんなパターンのメニューを作ることができます。
3本ラインを×に変形させたり、メニューの出し方を工夫するだけでサイトの印象が一段と良くなります。
今回はハンバーガーメニューに絞ってご紹介しましたが、次回は別のメニューデザインもご紹介したいと思います。
このページをブックマークしてたくさん使っていただけると嬉しいです♪
最後までご覧いただきありがとうございました☆彡