ハンバーガーメニューの仕組み(動き、考え方)について

はじめに

今回は、下記のサイトを参考に、HTML5/CSS3、JavaScriptを使用したハンバーガーメニューの仕組み(動き、考え方)について勉強しました。

全体のコード一覧

See the Pen Untitled by Uka Suzuki (@Uka-Suzuki) on CodePen.

HTML5のコード解説

まず最初に、ハンバーガーメニューの土台を作っていきます。下のspanタグは、それぞれ上・真ん中・下の三本線を表しています。

<!-- hamburger01 -->
<div id="hamburger01">
　  <span></span>
    <span></span>
    <span></span>
 </div>
<!-- /hamburger01 -->

CSS3のコード解説

次に、CSS3では「①外側のデザイン」、「②内側のデザイン」、「③ハンバーガーメニューの三本線」、「④回転アニメーション」の４つに分けて、考えていきます。

①外側のデザイン

①でのポイントは、「position: relative;」の使い方です。
positionプロパティとは、要素に対し、基準位置からの配置位置を指定するときに用いられるプロパティのことを指します。relativeの役割は、通常の位置を基準に相対位置を指定する値のことを意味します。

/* hamburger01 */
/* hamburger01外側のデザイン */
#hamburger01 {
  background-color: #db7093;
  width: 50px;
  height: 50px;
  border-radius: 3px;
  cursor: pointer;
  position: relative; /* ボタン内側の基点となる */
}

②内側のデザイン

②でのポイントは、「position: absolute;」と「transition」の２つです。
absoluteは、「親要素を基準に絶対位置を指定する役割」があります。top、bottom、left、rightの４つ全てを必ず記載する必要はなく、relative+absoluteはセットで使用することが多いです。

/* hamburger01内側のデザイン */
#hamburger01 span {
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  width: 45%;
  transition: all 0.4s; /* アニメーションの設定(動きの速度を表している) */
}

※下記のサイトを参考に、まとめています👇

③ハンバーガーメニューの三本線

③では、ハンバーガーメニューの三本線をデザインしていきます。
ここでのポイントは、「:nth-of-type()」です。nth-of-type()の意味は、「指定した要素のうちx番目の要素を選択し、CSSに適用するための擬似クラス」を表しています。擬似クラスとは、指定した要素の一部にCSSを反映できる方法のことを言います。

その他、odd(奇数)やeven(偶数)やn(何番目という意味→2nなら、「2nの倍数である偶数番目に適用されます」)

/* hamburger01の三本線 */
#hamburger01 span:nth-of-type(1) {
  top: 15px;
}

#hamburger01 span:nth-of-type(2) {
  top: 23px;
}

#hamburger01 span:nth-of-type(3) {
  top: 31px;
}

④回転アニメーション

④のポイントは、「active」と「transform」の２つです。
activeは、「要素をクリックした際にスタイルを変化させる疑似クラス」という意味です。今回は、ハンバーガーメニューをクリックしたらactiveクラスを付与するというのをJavaScriptで制御しています。

/* activeクラスが付与されると線が回転して×になる */
#hamburger01.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  /* transformは、動きを付けるためのプロパティ */
  /* translateは、要素を水平方向や垂直方向に移動する関数 */
  /* rotateは、マウスホバー時に要素を回転させる関数 */
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}

#hamburger01.active span:nth-of-type(2) {
  opacity: 0; /* 真ん中の線は透過という意味 */
}

#hamburger01.active span:nth-of-type(3) {
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}

JavaScriptのコード解説

JavaScriptは勉強中なので、今回は用語を調べながら理解を深める程度にします。

use strickとは、「strickモード(厳格モード)で実行され、コード内の問題を早期発見に繋げることができる宣言」を意味します。

documentとは、「HTML要素へプログラム上で簡単にアクセスできるオブジェクト」で、querySelector()は、「JavaScriptから任意のHTML要素を検出・取得することができるメソッド」という意味です。

"use strick";

/* hamburger01 */
document.querySelector("#hamburger01").addEventListener("click", function () {
  this.classList.toggle("active");
});

.addEventListenerは、「様々なイベント処理を実行するメソッド(マウスによるクリック、キーボードからの入力など)」を行うことができます。

よく使うイベントととして、clickがあります。上記の場合、#hamburger01というクラスにクリックイベントを仕込みます。「クリックされたら、クリックした要素に対してactiveというクラスを付与する仕組みになっている」という訳です。

.classListは、「特定の要素のクラス名を追加したり、削除したり、参照したりすることが出来る便利なプロパティ」で、後ろにメソッドを定義することで機能を指定することができます。

.toggleは、「クラスの有無の切り替えを行うメソッド」で、.toggle()の()内のクラス名があれば削除し、なければ追加します。

今後の課題

今日は、大まかに全体像を把握することができました。次回は、用語や仕組みの理解度を深めつつ、新たにハンバーガーメニューの動きに着目しようと考えました。

まとめ　

ハンバーガーメニューを１つずつ紐解いてみると、シンプルだけど疑似要素などCSS3の応用編といった感じがしました。今後は、様々なパターンでも対応できるよう、操作性を意識した動きを学んでいきます。