JavaScriptのみで作るハンバーガーメニューの作り方

読者の悩み

  • ハンバーガーメニューの作り方がわからない
  • JavaSciptは難しくない？

本記事の内容

  • JavaScriptで自作ハンバーガーメニューの作り方
  • JavaScriptで簡単にハンバーガーメニューを作成

ハンバーガーメニューを自作で作ってみたいけど、どうしたらいいの？

javaScriptを使い、htmlのクラスの付け替えで、簡単にハンバーガーメニューが設置できます。

JavaScriptで自作ハンバーガーメニューの作り方

今回、お題を色々考えましたが、WEB制作でスマホサイズでは定番で使うハンバーガーメニューを作っていきたいと思います。

こちらのハンバーガーメニューを作り方を理解することで、好きなようにハンバーガーメニューをカスタマイズすることが、出来るのでオススメです。

HTMLを作っていこう

まず、index.htmlファイルで各パーツを作っていきます。

ハンバーガーメニューの構成はこのような感じです。

  • ボタン（三本線）
  • クリックすると出てくるメニュー

まず、「ボタン」から作っていきます。

<header class="header">をbodyタグ内に作り、次のコードを書いてください。

<header class="header">
    <div class="sp-nav sp-nav_js">
      <div class="sp-nav__inner">
         <span class="first-line first-line_js"></span>
         <span class="center-line center-line_js"></span>
         <span class="last-line last-line_js"></span>
      </div>
    </div>
  </header>

headerタグの中にdivタグ、その中にもう一つdivタグを作って、その中にspanを３つ並べます。

こちらのspanが三本線になります。

そして、クラスを今回は２種類付けていて、スタイルを付ける用と、JSを設置する用（_js)で、２つ設置しておいてください。

本当は、一つのクラスにCSSもJavaScriptも設置できますが、今回はJS設置用にわかりやすくクラスを２つに分けてみました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- リセットCSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" href="css/styles.css">
  <title>ハンバーガーメニュー</title>
</head>
<body>
  <header class="header">
    <div class="sp-nav sp-nav_js">
      <div class="sp-nav__inner">
         <span class="first-line first-line_js"></span>
         <span class="center-line center-line_js"></span>
         <span class="last-line last-line_js"></span>
      </div>
    </div>
  </header>
  
</body>
</html>

index.htmlファイルはこのようになったと思います。

次は、クリックすると出てくるメニューを設置します。

</header>の下に次のコードを書いていきます。

<div class="overlay overlay_js">
    <nav class="overlay__nav">
      <ul class="overlay__ul">
        <li class="overlay__li"><a href="#">Menu1</a></li>
        <li class="overlay__li"><a href="#">Menu2</a></li>
        <li class="overlay__li"><a href="#">Menu3</a></li>
        <li class="overlay__li"><a href="#">Menu4</a></li>
      </ul>
    </nav>
  </div>

こちらのoverlayというクラスですが、こちらで、画面全体を覆う様に後で、スタイルを付けていきます。

こちらの内容をHTMLの</header>の下に記入していきましょう。

<body>
  <header class="header">
    <div class="sp-nav sp-nav_js">
      <div class="sp-nav__inner">
         <span class="first-line first-line_js"></span>
         <span class="center-line center-line_js"></span>
         <span class="last-line last-line_js"></span>
      </div>
    </div>
  </header>

  <div class="overlay overlay_js">
    <nav class="overlay__nav">
      <ul class="overlay__ul">
        <li class="overlay__li"><a href="#">Menu1</a></li>
        <li class="overlay__li"><a href="#">Menu2</a></li>
        <li class="overlay__li"><a href="#">Menu3</a></li>
        <li class="overlay__li"><a href="#">Menu4</a></li>
      </ul>
    </nav>
  </div>
  
</body>

HTMLファイルはこのような感じになっていると思います。これで、HTMLファイルでの要素を作る段階は終わりです。

ブラウザに表示してみましょう。
このような感じになっていると思います。

次は、元々用意されているstyles.cssファイルにCSSを書いていきましょう。

CSSを付けていきましょう

それでは、スタイルを付けて見た目の整えていきます。

まずは、ハンバーガーの３本線のボタンを作っていきましょう。

こちらのCSSをstyles.cssファイルに書いてください。

body {
  background-color: antiquewhite;
  position: relative;  /* クリックした後出てくるメニューの基準位置 */
  overflow: hidden;  /* はみ出たメニューを表示しない */
}

.header {
  width: 100%;
  position: relative;
  z-index: 9999;  /* 一番上に設置して、メニューが出ても隠れないようにする */
}

.sp-nav__inner {
  border: 1px solid #918f8f;
  border-radius: 3px;
  width: 36px;
  margin: 20px 3% 0 auto; /* メニューの位置を調整 */
  background-color: #ffffff;
}

/* ハンバーガーの三本線 */
span.first-line {
  display: block;
  width: 24px;
  height: 3px;
  background-color: #000;
  border-radius: 3px;
  margin: 6px auto 4px;
  transition: all .1s; /* クリック時のアニメーション */
}
span.center-line {
  display: block;
  width: 24px;
  height: 3px;
  background-color: #000;
  border-radius: 3px;
  margin: 4px auto;
  transition: all .1s;
}
span.last-line {
  display: block;
  width: 24px;
  height: 3px;
  background-color: #000;
  border-radius: 3px;
  margin: 4px auto 6px;
  transition: all .1s;
}

ブラウザで表示を確認するとこのような感じになっていると思います。
ハンバーガーメニューが形になってきましたね。

次は、クリックするボタンのアニメーション後のスタイルを付けていきます。

まずは、index.htmlの三本線のspanタグに、アニメーション用のクラスのswingを付けます。

<body>
  <header class="header">
    <div class="sp-nav sp-nav_js">
      <div class="sp-nav__inner">
         <span class="first-line first-line_js swing"></span>
         <span class="center-line center-line_js swing"></span>
         <span class="last-line last-line_js swing"></span>
      </div>
    </div>
  </header>

spanタグにswingのクラスを追加したら、このようになります。

そして、アニメーション後のスタイルをstyles.cssに書いてきます。

/* 三本線のボタンをクリック後のスタイル */
span.first-line.swing {
  transform: translateY(7px) rotate(45deg);
}
span.center-line.swing {
  opacity: 0;
}
span.last-line.swing {
  transform: translateY(-7px) rotate(-45deg);
}

styles.cssの最後尾に追記してください。

こちらの内容ですが、三本線のボタンをクリックした時に、swingというクラスを付けることで、アニメーション後のスタイルが、このような内容で上書きされるように設定しました。

なので、span.first-lineにswingを付けて、span.first-line.swingと書くことで、上書きできます。

ブラウザで表示してみましょう。
このような画面になっていれば、大丈夫です。

アニメーション後のスタイルを付けることが出来たので、index.htmlファイルのswingクラスをもう一度、外しておきましょう。
外すとこのようなindex.htmlの内容になります。

<body>
  <header class="header">
    <div class="sp-nav sp-nav_js">
      <div class="sp-nav__inner">
         <span class="first-line first-line_js"></span>
         <span class="center-line center-line_js"></span>
         <span class="last-line last-line_js"></span>
      </div>
    </div>
  </header>

  <div class="overlay overlay_js">
    <nav class="overlay__nav">
      <ul class="overlay__ul">
        <li class="overlay__li">Menu1</li>
        <li class="overlay__li">Menu2</li>
        <li class="overlay__li">Menu3</li>
        <li class="overlay__li">Menu4</li>
      </ul>
    </nav>
  </div>
  
</body>

swingをまた外す理由は、クリックした時に、swingのクラスを付けるようにJavaScriptで設定するからです。
あくまで、スタイルを確認するために、アニメーション後用にクラスを付けていました。

これで、三本線のボタンのスタイルは完了です。

次はメニューのスタイルを作っていきたいと思います。
三本線のボタンをクリックした後の出てくるメニューですね。

メニューは画面全体を覆う様に、そして、スクロールしても追尾するようなスタイルをしていきます。

/* クリックした後出てくるメニュー */
.overlay {
  position: fixed; 
  top: 0; /* 画面全体を覆う*/
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%; /* 画面全体を覆う*/
  background-color: rgb(0, 144, 150, .5);
  z-index: 9998; /* 三本線のボタンが出るように */
  transition: all .3s; /* アニメーションを付ける */
}

.overlay__ul {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

li.overlay__li {
  font-size: 30px;
  margin: 20px 0;
}

position: fixed;で、スクロールしても、画面を追尾するように設定し、コメントアウトの部分の「画面全体を覆う」の部分の書き方で、画面全体を覆う設定しています。

ブラウザで表示するとこんな感じです。

先程のスタイルを追記してこうなっていたら、大丈夫です。

メニューのスタイルを確認できたので、このメニューを画面外に移動しておきます。

/* クリックした後出てくるメニュー */
.overlay {
  position: fixed; 
  top: 0; /* 画面全体を覆う*/
  left: -100%; /* 左の画面外に出す */
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%; /* 画面全体を覆う*/
  background-color: rgb(0, 144, 150, .5);
  z-index: 9998; /* 三本線のボタンが出るように */
  transition: all .3s; /* アニメーションを付ける */
}

先程、追記したstyles.cssファイルの.overlay内の「left: 0;」を「left: -100%;」に変更して、画面幅分だけ、左の外に移動して、観えないようにしておきましょう。

bodyタグで、「overflow: hidden;」を設定しているので、完全にブラウザ画面内から出た要素は、観えないようになるように設定しておきます。

変更したら、もう一度、ブラウザで表示を確認しておきます。

はい！
さっきまであった、メニュー画面が消えましたね。左の画面外にメニューが移動しました。

それでは、次は先ほどと同じ様に、アニメーション後のスタイルも付けておきます。

 <div class="overlay overlay_js swing">
    <nav class="overlay__nav">
      <ul class="overlay__ul">
        <li class="overlay__li"><a href="#">Menu1</a></li>
        <li class="overlay__li"><a href="#">Menu2</a></li>
        <li class="overlay__li"><a href="#">Menu3</a></li>
        <li class="overlay__li"><a href="#">Menu4</a></li>
      </ul>
    </nav>

div要素のoverlayクラスがついている要素に、「swing」のクラスを追記します。
「swing」クラスが付いたらと仮定して、スタイルを付けていきます。

styles.cssの一番下にこちらの内容を追記してください。

/* クリックした後出てくるメニューのアニメーション後のスタイル */
.overlay.swing {
  left: 0%;
}

ブラウザで確認すると、メニューが現れてると思います。

「.overlay.swing」とすることで、CSSを上書きし、「left: 0%;」にして、画面内にメニューを戻します。これで、クリックした後は画面内にメニューを戻すスタイルを付けることが出来ました。

アニメーション後の設定なので、「index.htmlファイル」の、「overlay」のクラスの要素から、「swing」のクラスを外しておきましょう。

<body>
  <header class="header">
    <div class="sp-nav sp-nav_js">
      <div class="sp-nav__inner">
         <span class="first-line first-line_js"></span>
         <span class="center-line center-line_js"></span>
         <span class="last-line last-line_js"></span>
      </div>
    </div>
  </header>

  <div class="overlay overlay_js">
    <nav class="overlay__nav">
      <ul class="overlay__ul">
        <li class="overlay__li"><a href="#">Menu1</a></li>
        <li class="overlay__li"><a href="#">Menu2</a></li>
        <li class="overlay__li"><a href="#">Menu3</a></li>
        <li class="overlay__li"><a href="#">Menu4</a></li>
      </ul>
    </nav>
  </div>

index.htmlファイルの「overlay」のswingクラスを外すしたら、body内はこのような感じになっております。

これで、アニメーション前のスタイル、アニメーション後のスタイルをすべて付け終わりました。

後は、JavaScriptを書くのみです。長らくお待たせしました。

JavaScriptで動きを付けていきましょう

まずは、JavaScriptを書く用のファイルを作ります。

index.htmlファイルのbodyタグの閉じタグ</body>の上にこちらの記述をしてファイルを作ります。

<script src="js/main.js"></script>

なぜ、bodyタグの閉じタグ</body> の上に書くかというと、JavaScriptはHTML、CSSを連携して動くようになっているので、HTML、CSSを読み込んでからでないと、JavaScriptがエラーを起こします。

なので、順番としては、HTML、CSSを読み込んでから、JavaScriptを読み込むように、</body>タグの上に設置します。

意外とこの部分で僕も躓いたので、説明しました。

この記述を書いて、VScodeでしたら、マウスホバーするして、「command + クリック」のショートカットでmain.jsのファイルを作れます。
普通にjsフォルダを作って、そのjsフォルダの中に、main.jsファイルを作ってもいいです。

このようなファイル構成になっていたら、大丈夫です。

実際にJavaScript書いてみよう

main.jsフォルダを作れたら、main.jsファイルに移動して、まず下の記述を書いていきます。

'use strict';

{

}

この「use strict」ですが、これを書くことで、確実なエラーチェックが出来るので、main.jsファイルの先頭に記述します。

まずは、HTML要素を取得していきます。

三本線のボタンを取得していきます。

'use strict';

{
  // 三本線のボタンを取得
  const hBtn = document.querySelector('.sp-nav_js');

}

このように、呪文のような書き方をすると、HTML要素を取得できます。
初めは意味がわからないと思います。

わかりやすいように２つのパーツに分けて説明していきます。

document.querySelector('.sp-nav_js');

まず、document.querySelector('.sp-nav_js');部分です。

「document.querySelector」は、HTML要素のクラス名を指定して、HTML要素を取得できます。

今回は「sp-nav_js」のクラスが付いているHTML要素を取得したいのでこのように書きました。

なので、「document.querySelector()」の最後の（）の中にHTML要素のクラス名を入れることで、指定したクラスが付いているHTML要素を取得できることができます。

const hBtn =

左側の「const hBtn =」ですが、これは、変数という入れ物を作っています。

「const」と書くことで、入れ物を作り、「hBtn」はconstの入れ物に好きな名前を付けることが出来ます。
「hBtn」は僕が自由に命名しました。

そして、「=」を付けることで、さっき取得した、HTML要素を「hBtn」という入れ物の中に入れることが出来ます。

HTML要素を変数の入れ物に入れると、そのHTML要素をずっと保存することが出来て、その変数に入ったHTML要素を「hBtn」と書いて、別の場所で何度も繰り返し使うことが可能になります。

いちいちHTML要素を使う度に、document.querySelector('.sp-nav_js');と書くのは面倒臭いので、一度書いて、変数の入れ物に入れて、使い回すというのが一般的です。

これで、「hBtn」の中にHTMLの要素が入っているのですが、ちゃんと入っているかを確認したいですよね。

デバックしながら進めよう

次は、この様に、「const hBtn = document.querySelector('.sp-nav_js');」の下に書いてください。

console.log(hBtn);

こちらは、JavaScriptのデバックといって、ちゃんと中身にHTMLが入っているかを確認することができます。

ちなみにですが、今、('.sp-nav_js')と(hBtn)があり、シングルクォーテーションで囲んでいる時と、囲んでない時が、ありますが、文字列はシングルクォーテーションで囲まなくてはならなくて、変数や、関数は、シングルクォーテーションで囲まないというルールがあります。
変数や、関数以外はだいたい文字列なので、シングルクォーテーションで囲んでおきましょう。

関数に関しては、まだこの講座では触れません。次の講座で書こうと思っています。

main.jsの中身はこの様になりました。

'use strict';

{
  // 三本線のボタンを取得
  const hBtn = document.querySelector('.sp-nav_js');
  console.log(hBtn);

}

console.log();と書いて、（）の中身に表示したいものを書き込むことでコンソールに表示することが出来ます。

コンソールとは、どこにあるかというと、グーグルのデベロッパーツールを開き、左上辺りにあると思うので、クリックします。

「コンソール」がない場合は、右の矢印の部分をクリックすると、出てきますので、ドラックアンドドロップで場所を調整してください。

コンソールをクリックして画面が切り替わったら、次は、ブラウザの再読み込み（リロード）をしてみてください。

もし、表示されない場合は、どこか書き間違っている可能性があります。

どうしても間違っている場所がわからない時にオススメなWebサービスが「デュフフ」です。
https://difff.jp/

デュフフでは、右に見本のコード、左に自分のコードを入れて、比較するのボタンを押すと、違っている部分を表示してくれます。

デュフフはどうしても間違っている部分がわからない時の最終手段として使えるので、オススメですね。

話を戻しますと、console.log();は、ちゃんと自分のコードが動いているのかを確認する事ができます。

もし、JavaScriptでconsole.log();が無いと、JavaScriptが動かない時に、間違ってる場所を見つけるのにかなりの時間が必要になると思います。

基本は、console.log();でデバックしながら、JavaScriptを書いていくことになります。

console.log();は、（）の中のものをコンソールに表示するだけ機能ですが、JavaScriptでは、めちゃめちゃ使いますので、頭に入れておきましょう！！

console.log()で動いているのを確認したら、次はクリックして出てくるメニューのHTML要素を取得していきます。

　// 三本線を取得
  const firstLine = document.querySelector('.first-line_js');
  const centerLine = document.querySelector('.center-line_js');
  const lastLine = document.querySelector('.last-line_js');
　// メニューを取得
  const overlay = document.querySelector('.overlay_js');

それぞれのHTML要素をdocument.querySelector()で、取得していきます。

document.querySelector()は、HTML要素のクラスを指定して、HTML要素を取得する呪文でしたね。

クリックするボタンの三本線と、クリック後現れるメニューを取得するコードを書きました。

querySelectorのSの大文字で書くことや、クラス名の前にドットが必要なので、注意してください。

ちなみにJavaScriptの大文字で区切る書き方をキャメルケースといい、変数名（constの後に書く好きに決めれる変数の名称）はキャメルケースで書かないで、クラス名のようにハイフンで区切るとエラーになるので、注意が必要です。

ちなみに変数名の最初に数字を使えないなどのルールがあります。気になる人はJavaScript、変数名などで、ググってみてください。

上記のコードを追記するとmain.jsはこんな感じです。

'use strict';

{
  // 三本線のボタンを取得
  const hBtn = document.querySelector('.sp-nav_js');
  console.log(hBtn);
  // メニューを取得
  const overlay = document.querySelector('.overlay_js');
  // 三本線を取得
  const firstLine = document.querySelector('.first-line_js');
  const centerLine = document.querySelector('.center-line_js');
  const lastLine = document.querySelector('.last-line_js');

}

先程と同じ様に、console.log()で、デバッグしていきます。
console.log();でそれぞれの取得したコードの下に書いていきます！

'use strict';

{
  // 三本線のボタンを取得
  const hBtn = document.querySelector('.sp-nav_js');
  console.log(hBtn);
  // メニューを取得
  const overlay = document.querySelector('.overlay_js');
  console.log(overlay);
  // 三本線を取得
  const firstLine = document.querySelector('.first-line_js');
  console.log(firstLine);
  const centerLine = document.querySelector('.center-line_js');
  console.log(centerLine);
  const lastLine = document.querySelector('.last-line_js');
  console.log(lastLine);

}

この様にconsole.log()の（）の中に変数名を入れていって、コンソールで確認します。

それでは、コンソールでちゃんとHTML要素を取得できているかを確認しましょう。

このように、4行、エラーにならず表示されていたらOKです。

ちなみにですが、右側の数字で、どこのconsole.log()が表示されているのか？行数が表示できます。エラー時も行数が表示するので、それを参考にチェックしてください。

イベントをHTMLに付けよう

それでは、必要なHTMLを取得したので、まずは、三本線のボタンにイベントを付けていきたいと思います。

今回は、ボタンなので、「クリックしたら…」というイベントを付けます。

「イベント」とは、今回ので例えれば、「クリックしたらメニューが出てくる」という動作のクリックというタイミングのを付けることができます。

main.jsの最後尾に追記していきます。

// クリックイベント
hBtn.addEventListener( 'click', function() {

});

また、呪文みたいなコードが出てきましたね。でも、安心して観ていきましょう。

分解してみます。

hBtn.addEventListener

「hBtn」という先ほど作った、変数に、「.addEventListener」がくっついています。

基本的にJavaScriptは、ドットで繋いで、書いていきます。

変数にaddEventListenerをドットでつなぐと、ボタンにイベントの機能をプラスすることができます。

( 'click', function() {
　　// この中にクリックした後の動きを書く
});

そして、addEventListener()となっていて、()の中にどんなイベントなのか？、イベント後どうなるか？を書いていきます。

addEventListener()の()の中で、まず、「'click'」となっています。このclickはどんなイベントか？の部分で、シングルクォーテーションの中を「click」と書くことで、クリックしたら…というイベント付けられます。

他にも色々イベントを付けられますが、今回は「click」と入れて、クリックのイベントを付けていきます。

function() {}

こちらは、関数という書き方です。
{}の中にクリック後の処理を書いていきます。

例えば、抽象的な言い方をすると関数は「自動販売機」みたいなものです。

お金を入れて、ジュースを出すように、データを入れると違うデータに変更する仕組みを作ることができます。

関数をわかりやすく解説しています。

【よくわからないシリーズ】JavaScriptの関数を解説します。 |
読者の悩み｜JavaScriptの関数を勉強したけど、いまいちよくわからない。関数の使い所がわからない。引数が良くわからない。本記事の内容｜JavaScriptの関数を誰でもわか…
tonoblog.yutaka01.net

今回で言えば、画面外にあるメニューを画面内のメニューに変更するのに、関数を使っている感じですね。

addEventListener()の中には、function() {}があって、クリックをきっかけに関数で、データを変更するという感じになります。

イベント後の動きを付けよう

このfunction() {}の中にクリック後の処理を書いていきましょう。

// メニューを条件によりクラスのつけ外しをする
if ( overlay.classList.contains('swing') ) {
   overlay.classList.remove('swing');
   console.log('CLOSE!!');
} else {
   overlay.classList.add('swing');
   console.log('OPEN!!'); 
}

また、ややこしい書き方が出てきたと思っていると思います。

ですが、この「if」という書き方はそんなに難しくないです。

こちらは「if文」といい、条件分岐させるJavaScriptの構文です。

if ( 条件分岐の条件 ) {
  // 条件に当てはまるならここを実行
} else {
  // 条件に当てはまらないならここを実行
}

このように、if文で、条件を設定することで、その後の処理を実行出来ます。
elseの下は、当てはまらない場合の処理を実行します。

当てはまらない場合の処理がない場合はelseを省略することも可能です。

if分の最後にはセミコロン（;)は無しで、大丈夫です。

では、条件の内容をみていきましょう。

overlay.classList.contains('swing')

と、条件に書いてありますが、このoverlay.classList.contains('swing')の意味は、overlayの変数に入っているHTML要素のクラス名に「swing」があるかをチェックしてくれます。

同じクラス名があれば正しい。なければ誤り。ということになります。

こちら、if文とセットで、classList.contains()がセットで使われることが多いですね。

if分の条件が当てはまる方のコードをみていきましょう。

 overlay.classList.remove('swing');

overlayの変数にclassList.removeというのがくっついていますね。

classList.removeは()内で指定したクラス名を削除してくれます。

なので、if文を読むと、「もし、swingのクラスが存在していたら、swingのクラスを削除します。」という流れになります。

では、if分の条件が当てはまらない方をみてみます。

overlay.classList.add('swing');

こちらは、overlayの変数にclassList.addが付いていますね。classList.addと書くことで、()内に書いた、クラス名をHTML要素に加えることができます。

なので、「もし、swingのクラスが存在しないなら、swingのクラスを追加します。」という流れになります。

classList.contains、classList.remove、classList.addなど、classListがつくものは、HTML要素のクラスに関係するものということが、わかりますね。

こちらを書くと、main.jsはこのような感じになっていると思います。

'use strict';

{
  // 三本線のボタンを取得
  const hBtn = document.querySelector('.sp-nav_js');
  console.log(hBtn);
  // メニューを取得
  const overlay = document.querySelector('.overlay_js');
  console.log(overlay);
  // 三本線を取得
  const firstLine = document.querySelector('.first-line_js');
  console.log(firstLine);
  const centerLine = document.querySelector('.center-line_js');
  console.log(centerLine);
  const lastLine = document.querySelector('.last-line_js');
  console.log(lastLine);

  // クリックイベント
  hBtn.addEventListener( 'click', function() {
      if ( overlay.classList.contains('swing') ) {
          overlay.classList.remove('swing');
          console.log('CLOSE!!');
      } else {
          overlay.classList.add('swing');
          console.log('OPEN!!');
      }
  });
  
}

console.log('CLOSE!!'); console.log('OPEN!!');は、動かした時にコンソールで動きがわかりやすいように設置しました。

実際に動かしてみよう

それでは、ボタンをクリックして動かしてみましょう。

ボタンをクリックするとちゃんとメニューが動きましたね。そして、コンソールに「OPEN!!」と「CLOSE!!」も表示されているので、処理がしっかりと動いていることも確認できました。

ボタンの三本線にも動きを付けよう

最後の仕上げの、ボタンの三本線も動くようにJavaScriptを書いていきましょう。

こちらの内容をmain.jsの下に追記していきます。

// 三本線に条件によりクラスのつけ外しをする
 if ( firstLine.classList.contains('swing') ) {
     firstLine.classList.remove('swing');
 } else {
     firstLine.classList.add('swing');
 }

 if ( centerLine.classList.contains('swing') ) {
      centerLine.classList.remove('swing');
 } else {
      centerLine.classList.add('swing');
 }

 if ( lastLine.classList.contains('swing') ) {
      lastLine.classList.remove('swing');
 } else {
      lastLine.classList.add('swing');
 }

三本線の方は先程の、if文とほぼ同じようにswingを付加するように書くので、先程のif文を３つコピーして、「overlay」の変数部分だけを書き換えて、設置してください。

三本線はすべて動かします。

main.jsはこのようになります。

'use strict';

{
  // 三本線のボタンを取得
  const hBtn = document.querySelector('.sp-nav_js');
  console.log(hBtn);
  // メニューを取得
  const overlay = document.querySelector('.overlay_js');
  console.log(overlay);
  // 三本線を取得
  const firstLine = document.querySelector('.first-line_js');
  console.log(firstLine);
  const centerLine = document.querySelector('.center-line_js');
  console.log(centerLine);
  const lastLine = document.querySelector('.last-line_js');
  console.log(lastLine);

  // クリックイベント
  hBtn.addEventListener( 'click', function() {
      // メニューを条件によりクラスのつけ外しをする
      if ( overlay.classList.contains('swing') ) {
          overlay.classList.remove('swing');
          console.log('CLOSE!!');
      } else {
          overlay.classList.add('swing');
          console.log('OPEN!!');
      }

      // 三本線に条件によりクラスのつけ外しをする
      if ( firstLine.classList.contains('swing') ) {
          firstLine.classList.remove('swing');
      } else {
          firstLine.classList.add('swing');
      }

      if ( centerLine.classList.contains('swing') ) {
          centerLine.classList.remove('swing');
      } else {
          centerLine.classList.add('swing');
      }

      if ( lastLine.classList.contains('swing') ) {
          lastLine.classList.remove('swing');
      } else {
          lastLine.classList.add('swing');
      }
      
  });

}

if文をコピーし、変数部分をすべて書き換えるとこのようになります。

では、ブラウザをリロードし、動かしてみましょう。

キレイに三本線も動きましたね。

JavaScriptでクラスを追加することで、CSSの書き換えが起こり、CSSにtransitionを指定しているので、アニメーションで動きがつきました。

完了です！！お疲れさまでした！

ここで終わっても良いのですが、実は、もっと簡単なJavaScriptの書き方があります。

もっと簡単にJavaScriptを書いてみよう。

完成したけど、けっこうな量のJavaScriptを書かなくてはいけないんだなぁ…と思っていたあなたに朗報です。

すいません！実はもっと簡単な書き方があります。

現状、1つのif文で、5行も使っているのですが、こちらを1行で済ます方法があります。

さっき使っていたif文の代わりにこちらを使っていきます。

overlay.classList.toggle('swing');

実は、「classList.toggle('swing')」と書くことで、swingクラスがついている時は削除して、swingクラスがついていない時は追加するという操作を自動で行ってくれます！

classList.toggleめっちゃ便利ですよね！！

つまり、if文で一度、swingクラスをあるかどうかを確認して、処理を分けていたのを、このclassList.toggleを使うことで、一行で済ましてしまします。

では、一度、if文をすべて一度消してしまって、classList.toggleに書き換えていきましょう。

main.jsファイルはこのようになります。

'use strict';

{
  // 三本線のボタンを取得
  const hBtn = document.querySelector('.sp-nav_js');
  console.log(hBtn);
  // メニューを取得
  const overlay = document.querySelector('.overlay_js');
  console.log(overlay);
  // 三本線を取得
  const firstLine = document.querySelector('.first-line_js');
  console.log(firstLine);
  const centerLine = document.querySelector('.center-line_js');
  console.log(centerLine);
  const lastLine = document.querySelector('.last-line_js');
  console.log(lastLine);

  // クリックイベント
  hBtn.addEventListener( 'click', function() {
      overlay.classList.toggle('swing');
      firstLine.classList.toggle('swing');
      centerLine.classList.toggle('swing');
      lastLine.classList.toggle('swing');
  });

}

こんなにJavaScriptが短くなりました。

実際にリロードして動かしてみてください。さっきと同じように動いていると思います。

今回、JavaScript学習資料ということで、JavaScriptでよく使う「if文」の動きも一緒に学んでいただけたらと思い、まずこちらのコードが長い方を紹介しました。

今回はこれで完成となります。

最後までお読みいただきまして、誠にありがとうございます。

もし実装などで上手くいかないことありましたら、下記ボタンからご相談いただけましたらありがたいです。

お問い合わせ
JavaScript

この記事を書いた人

アバター

トノムラマサシ

masashi
Webサイト屋兼ブロガー｜過去に企業常駐などを経て現在はフリーランスでディレクションとコーダーとして活動しております。JS大好きなのでJSの仕事依頼お待ちしております。京都在中で5人家族。

記事一覧