さて今回が最後、JavaScriptをやっていこっか。

JavaScriptでハンバーガーメニューをOnOff

まず、『Hello』フォルダ内に『master.js』ファイルを作成しよう。

Helloフォルダ階層
Hello/
┣ index.html
┣ master.css
master.js

JavaScriptではハンバーガーメニューの開閉をやって、全てのレスポンシブヘッダー部分ができあがる。

header sp
header sp opend

JavaScriptコード

じゃあ、ここからJavaScriptでコードを書くけど、そんなに書くことはないからけっこう簡単。

var hamburger = document.getElementById('Hamburger');
var header_nav = document.getElementById('Header-Nav');

hamburger.addEventListener('click', function () {
    header_nav.classList.toggle("active");
});

これだけ、短いでしょ?

さて、コードの中身なんだけど

  1. 1行目ハンバーガーメニューがどこにあるかJavaScriptに伝えてる
  2. 2行目でヘッダーのリスト部分がどこにあるかJavaScriptに伝えてる
  3. ハンバーガーメニューをクリック(click)したらどんな処理をするのか
  4. classの『active』を追加、削除することで表示するかしないのか決めてる

CSSのとき見たと思うけど、activeのclassには『display: flex』って書いてあったよね?
この『dispay: flex』を付ける、消すを交互にやることでリストが開閉できるんだね。

 toggleのところは、addやremoveにしたら動かなくなるから注意してね

これで、レスポンシブのヘッダー部分が完成。
応用していくことで、あなただけのオリジナルなレスポンシブヘッダーができあがるはずだから挑戦してみよう。

人気記事【必読】"見やすく修正しやすいコード"につながる本『リーダブルコード』