CSSで作るハンバーガーメニューのアクションまとめ

CSSだけで作成する、クリックするとバツ印に変形するハンバーガーメニューのアクションサンプルをまとめました。

Webサイトのナビゲーションで定番の三本線アイコンに、動きのアクションを加えることで、ユーザーにメニューの開閉を視覚的に分かりやすく伝えることができます。

基本コード

3本のラインが縦に並んだ、スタンダードなハンバーガーメニューです。

HTMLのコード

ハンバーガーメニューを構成するHTMLコードです。

<div class="hamburger">
  <span></span><span></span><span></span>
</div>

spanタグを３つ並べてハンバーガーメニューを作成しています。

JSのコード

</body>タグの直前などに、以下のスクリプトを追加して、アクションを実行するクラスを設定します。

<script>
  document.querySelectorAll('.hamburger').forEach(hamburger => {
      hamburger.addEventListener('click', function() {
          this.classList.toggle('active');
      });
  });
</script>

WordPressで使用する場合は、外部ファイルで読み込みがオススメです。

CSSのコード

ハンバーガーメニューのスタイルを設定します。

.hamburger {
  width: 50px;
  height: 42px;
  position: relative;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  background: #333;
  transition: all 0.3s ease;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
  bottom: 0;
}
.hamburger.active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

３本の線はposition: absoluteで、topに個別の位置指定をすることで縦に配置しています。

ハンバーガーメニューをクリックして「active」クラスが付与されると、transformで上下のラインが中央に移動しながら回転してばつ印になります。さらに、transitionを設定することで、滑らかなアニメーションを実現しています。

中央の線はopacity: 0でフェードアウトさせています。

逆回転

バツ印を形成する際の、回転方向を逆にしたパターンです。

基本構造は上記と同じですが、 1本目を反時計回りに、3本目を時計回りに回転させます。

.hamburger {
  width: 50px;
  height: 42px;
  position: relative;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  background: #333;
  transition: all 0.3s ease;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
  bottom: 0;
}
.hamburger.active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(45deg);
}

transformのrotate(-45deg)部分の「-」を逆にすると、線の回転方向が逆になります。

中央のラインも回転

中央のラインがフェードアウトする際に、回転を加えたアクションです。

中央の線が90度回転しながら消えることで、単純なフェードアウトよりも躍動感のある変化を演出できます。

.hamburger {
  width: 50px;
  height: 42px;
  position: relative;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  background: #333;
  transition: all 0.3s ease;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
  bottom: 0;
}
.hamburger.active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: translateY(-50%) rotate(90deg);
}
.hamburger.active span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

中央の線にopacity: 0だけでなく、transform: rotate(90deg)を設定しています。

回転

全体を回転させて変形するアクションです。

上下の線を大きく回転させ、中央は縮小させて消しています。

.hamburger {
  width: 50px;
  height: 42px;
  position: relative;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  background: #333;
  transition: all 0.3s ease;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
  bottom: 0;
}
.hamburger.active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(135deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: translateY(-50%) scale(0);
}
.hamburger.active span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-135deg);
}

上下の線をrotate(135deg)とrotate(-135deg)に設定し、大きく回転させます。

中央の線はtransform: scale(0)で縮小しながら消える効果を加えています。

スピン

線が大きく回転しながら変化する、ダイナミックで目を引くアクションです。

全ての線が大きく回転しながら変化するので、インパクトのあるアニメーションになります。

.hamburger {
  width: 50px;
  height: 42px;
  position: relative;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  background: #333;
  transition: all 0.3s ease;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
  bottom: 0;
}
.hamburger.active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(225deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: translateY(-50%) rotate(180deg);
}
.hamburger.active span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-225deg);
}

上下の線をrotate(225deg)とrotate(-225deg)に設定して、大きく回転させます。

さらに中央の線もrotate(180deg)で180度回転させながら消去します。

バウンズ

3本線が弾むように動くアクションです。

遊び心のあるポップで軽快な印象を与えます。

.hamburger {
  width: 50px;
  height: 42px;
  position: relative;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  background: #333;
  transition: all 0.5s cubic-bezier(0.68, -0.8, 0.265, 1.85);
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
  bottom: 0;
}
.hamburger.active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: translateY(-50%) scale(0);
}
.hamburger.active span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

transitionにcubic-bezier(0.68, -0.8, 0.265, 1.85)を使用することで、弾むような動きを実現しています。

値の調整により、開始時の引き戻し効果や終了時のオーバーシュートを制御できます。

中央に移動

3本線が中央に収縮してから、展開してバツ印に変化するアクションです。

中央へ移動する動きの後に、回転を時間差でアニメーションしています。

.hamburger {
  width: 50px;
  height: 42px;
  position: relative;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  background: #333;
}
.hamburger span:nth-child(1) {
  top: 0;
  transition: top 0.2s ease 0.2s, transform 0.2s ease 0.4s;
}
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}
.hamburger span:nth-child(3) {
  bottom: 0;
  transition: bottom 0.2s ease 0.2s, transform 0.2s ease 0.4s;
}
.hamburger.active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  transition: top 0.2s ease, transform 0.2s ease 0.3s;
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
}
.hamburger.active span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
  transition: bottom 0.2s ease, transform 0.2s ease 0.3s;
}

各線に個別のtransitionを設定して、順番に動作させています。

「active」クラスが付与されると、中央の線が消えて、上下の線が中央へ移動してから回転します。

シーケンシャル

線が順番に変化するアクションです。

まず中央の線が消えて、上の線が先に動き、下の線が追いかけるように変化します。

.hamburger {
  width: 50px;
  height: 42px;
  position: relative;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  background: #333;
}
.hamburger span:nth-child(1) {
  top: 0;
  transition: top 0.2s ease 0.2s, transform 0.2s ease 0.4s;
}
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}
.hamburger span:nth-child(3) {
  bottom: 0;
  transition: bottom 0.2s ease 0.2s, transform 0.2s ease 0.4s;
}
.hamburger.active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  transition: top 0.2s ease, transform 0.2s ease 0.2s;
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
}
.hamburger.active span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
  transition: bottom 0.2s ease, transform 0.2s ease 0.3s;
}

3本線にtransitionでアニメーションの開始に、わずかな時間差を設けています。

位置設定とtransformの数値をそれぞれ設定することで、移動した後に回転のアニメーションが実行されます。

2本線

2本線で構成されるミニマルなハンバーガーメニューです。

HTMLのコードは、中央の線を除いてspanタグが２つになります。

<div class="hamburger">
  <span></span><span></span>
</div>
.hamburger {
  width: 50px;
  height: 42px;
  position: relative;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  background: #333;
  transition: all 0.3s ease;
}
.hamburger span:nth-of-type(1) {
  top: 8px;
}
.hamburger span:nth-of-type(2) {
  bottom: 8px;
}
.hamburger.active span:nth-of-type(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.hamburger.active span:nth-of-type(2) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
  width: 100%;
}

上の線にtop:8px、下の線にbottom:8pxを設定して、上下に余白を持たせて配置しています。

中央の線がないため、透明化の処理が不要でシンプルなコード構成になっています。

上下のアクション

下の線が短いスタイリッシュなデザインに、ホバーアクションを加えたハンバーガーメニューです。

ホバー時の動きとクリック時の変形を組み合わせることで、より高いユーザビリティを実現します。

.hamburger {
  width: 50px;
  height: 42px;
  position: relative;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  background: #333;
  transition: all 0.3s ease;
}
.hamburger span:nth-of-type(1) {
  top: 8px;
}
.hamburger span:nth-of-type(2) {
  bottom: 8px;
  width: 60%;
}
.hamburger:hover span:nth-of-type(2) {
  width: 100%;
}
.hamburger.active span:nth-of-type(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.hamburger.active span:nth-of-type(2) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
  width: 100%;
}

下の線をのwidth: 60%で短く設定しておき、:hoverセレクタでwidth: 100%にすることで、ホバー時に線が伸びるアクションになります。

Share on
関連記事
CSSで破線の間隔を調整する方法
CSSで破線の間隔を調整する方法
CSSでストライプなどの背景パターンを作る方法
CSSでストライプなどの背景パターンを作る方法
CSSで文字間と行間を変更する方法
CSSで文字間と行間を変更する方法