0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

はじめに

今回は、初級編で学んだ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を復習することができました。これらの組み合わせを用いて、実務でも使えるように理解を深めていきます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?