JavaScriptとCSSを組み合わせて快適なハンバーガーメニューを作る【中級編②】

はじめに

今回は、初級編で学んだJavaScriptのDOM操作とCSSを組み合わせて、左右から要素をスライドさせるハンバーガーメニューを制作していきます。

使用するJavaScriptの用語一覧

JavaScriptでハンバーガーメニューの開閉アニメーションを行う際、主に「DOM操作」を行うJavaScriptを使用します。

下記には、これまで勉強した＆今日も使うメソッドをまとめました。

名称	説明
.querySelector();	DOM要素を取得するために使用します。
.addEventListener();	イベントリスナーを追加するために使用します。クリックイベントなどを設定します。
.classList.toggle();	要素のクラスを切り替えるために使用します。メニューの表示状態を管理するのに便利です。
.getElementById();	指定したIDを持つ要素を取得するためのメソッドです。

右から現れるハンバーガーメニュー

See the Pen JavaScriptで快適なハンバーガーメニューを作る by Uka Suzuki (@uukasuzuki_) on CodePen.

CSS3のコード解説

.menu-right {
  z-index: 1;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  display: block;
  background: rgba(255, 68, 0, 0.8);
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

• transform: translateX(100%);は、メニューを画面の外（右端）に配置し、transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;では、メニューの表示/非表示のアニメーションを0.6秒で滑らかに行っています。

.menu-right.open {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

• transform: translateX(0);で、メニューを画面内に表示させ、visibility: visible;ではメニューを目に見える状態にします。

• 初期状態では、右からスライドするメニューは translateX(100%) で非表示し、ハンバーガーメニューをクリックすると、メニューが translateX(0) で右から表示される仕組みになっています。

左から現れるハンバーガーメニュー

See the Pen 左から現れるハンバーガーメニュー by Uka Suzuki (@uukasuzuki_) on CodePen.

左から現れるハンバーガーメニュー

.menu-left {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0; /* 画面の左側に配置 */
  width: 100%;
  height: 100vh;
  display: block;
  background: rgba(255, 68, 0, 0.8);
  opacity: 0;
  transform: translateX(-100%); /* 左からスライドさせるため、X軸で移動 */
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out; /* スライド速度を0.6秒に設定 */
}

.menu-left.open {
  opacity: 1;
  transform: translateX(0); /* メニューが開いたときに左から現れる */
}

• left: 0;で、メニューを画面の左端に固定し、transform: translateX(-100%);では、メニューが画面の外（左側）に隠れている状態にします。
  
  こうすることで、.menu-left.openクラスが追加されたとき、transform: translateX(0);で、メニューが左からスライドして表示される仕組みになっています。

まとめ

今回は、JavaScriptとCSSのtransformを復習することができました。これらの組み合わせを用いて、実務でも使えるように理解を深めていきます。