やりたい事

以下のようにハンバーガーアイコンをクリックするとハンバーガーアイコンが動くようにします。

JavaScriptの追加

ハンバーガーアイコンをクリックするので、ハンバーガーアイコンにイベントを追加します。
今回はハンバーガーアイコンをクリックすると “active” というクラスを追加したり削除したりさせています。

なお、今回はこの javascript を index.js というファイルに記載します。

const elements = document.getElementsByClassName('box_test');
for (let element of elements) {
  element.addEventListener('click', function (e) {
    element.classList.toggle('active');
  });
}

イベントについては以下も参考にして下さい。

参考

イベント入門

HTML

前回の続きになります。今回は javascript を使用するので index.js を読み込みます。

<!doctype html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>sample</title>
    <link href="style.css" rel="stylesheet">
    <script defer="defer" src="index.js"></script>
</head>

<body>
    <div class="box_test">
        <span> </span>
        <span> </span>
        <span> </span>
    </div>
</body>

</html>

CSS

cssは以下のようになります。前回に追加している部分はコメントの記載にある hamburger icon click 以下を参照して下さい。

.box {
  position: relative;
  width: 50px;
  height: 34px;
}

.box span {
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: black;
}

/* hamburger icon */
.box span:nth-child(1) {
  top: 0;
}

.box span:nth-child(2) {
  top: 15px;
}

.box span:nth-child(3) {
  bottom: 0;
}

/* hamburger icon click */
.box.active span:nth-child(1) {
  transform: translateY(15px) rotate(-45deg);
}

.box.active span:nth-child(2) {
  opacity: 0;
}

.box.active span:nth-child(3) {
  transform: translateY(-15px) rotate(45deg);
}

説明

/* hamburger icon click */
.box.active span:nth-child(1) {
  transform: translateY(15px) rotate(-45deg);
}

.box.active span:nth-child(2) {
  opacity: 0;
}

.box.active span:nth-child(3) {
  transform: translateY(-15px) rotate(45deg);
}

javascriptの動作はハンバーガーアイコンをクリックすると “active” というクラスのつけ外しをしています。
“active” クラスが追加された場合、1つ目のspan要素は transform プロパティを使って移動と回転をしています。3つ目のspan要素も同様です。
2つ目のspan要素は、見えなくなります。

最後に

特にありません。