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

2025.10.13

当ページのリンクには広告が含まれています。

URLをコピーしました！

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

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

こんな人にオススメ

ハンバーガーメニューの開閉をオシャレにしたい
ハンバーガーメニューの実装方法で指示を受けている
ハンバーガーメニューの実装方法がイメージ通りにいかない

はじめに

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

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

スライドイン

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の位置を変更することで、様々な場所から出現させることができます。