【CSS + jQuery】よく使うハンバーガーメニューの開閉アニメーション4選

こんにちは。すずきです。

この記事では実際によく使われるハンバーガーメニューの開閉アニメーションを紹介します。

はじめに

ハンバーガーメニューは共通のものを使用します。
jQueryでボタンとハンバーガーメニューのclassをつけ外し、デザイン調整をCSSで実装しています。

ハンバーガーメニューの実装方法についてはこちらの記事で解説しています。

あわせて読みたい

【コピペOK】ハンバーガーメニューの作り方を徹底解説【jQuery】 ハンバーガーメニューの作り方がわからない 使っているハンバーガーメニューが合っているのか不安 実務で使えるハンバーガーメニューを知りたい このような悩みに答えま…

スライドイン

See the Pen 【スライドイン】ハンバーガーメニュー by すずき (@k-suzuki3533) on CodePen.

.drawer__nav__inner {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
/* 展開時のデザイン */
.drawer__nav.active .drawer__nav__inner {
  transform: translateX(0);
}

transform: translateX(100%);でメニューの横幅分、横にスライドさせ、ハンバーガーメニュー展開時に元の位置に戻るようにしています。
transform: translateX(-100%);で逆方向からスライドさせたり、transform: translateY(100%);で縦方向にスライドさせる事もできます。

フェードイン

See the Pen 【フェードイン】ハンバーガーメニュー by すずき (@k-suzuki3533) on CodePen.

.drawer__nav__inner {
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* 展開時のデザイン */
.drawer__nav.active .drawer__nav__inner {
  opacity: 1;
}

opacity: 0;の状態からハンバーガーメニュー展開時にopacity: 1;に変更し、transition: opacity 0.3s ease;でスピードを調整しています。

回転しながら表示

See the Pen 【回転しながら表示】ハンバーガーメニュー by すずき (@k-suzuki3533) on CodePen.

.drawer__nav__inner {
  transform-origin: top right;
  transform: rotateZ(90deg);
  transition: transform 0.3s ease;
}
/* 展開時のデザイン */
.drawer__nav.active .drawer__nav__inner {
  transform: rotateZ(0deg);
}

transform-origin: top right;で回転する原点を指定し、transform: rotateZ(90deg)で要素を回転させておきます。
ハンバーガーメニュー展開時、transform: rotateZ(0deg);で回転させている要素を元に戻します。
transform-originの位置を変更することで、様々な場所から出現させることができます。

まとめ

ハンバーガーメニューの開閉アニメーションでよく使われるものを解説しました。
ここからカスタマイズすることで色々な出し方に対応できるようになります。