「レスポンシブ」ヘッダーを作る Part3【JavaScript編】

・前回の記事はこちら
Part1≫「レスポンシブ」ヘッダーを作る Part1【HTML編】
Part2≫「レスポンシブ」ヘッダーを作る Part2【CSS編】

今回はJavaScriptの部分。ハンバーガーメニューを押してレスポンシブ用のメニューの詳細をだしていくところをやっていきましょう。

さて、まず最初に作った「Header」フォルダのなかに「js」というフォルダを作りましょう。そしたらjsフォルダのなかに「master.js」を作っていきます。

※フォルダ階層

Header/
　├ index.html
　├ css/
　|　└ master.css
　└ js/
　 　└ master.js

はい、これで準備OK。master.jsをひらいてコードを書いていきましょう。

First Step: addEventListenerを使ってクリックしたときに処理する

const responsive_menu_btn = document.querySelector('.responsive_btn');
responsive_menu_btn.addEventListener('click', menuToggle);

Next Step: レスポンシブ用のメニューを表示するfunctionを書いていこう

function menuToggle() {
  const header_menu_detail = document.querySelector('.header_nav');
  header_menu_detail.classList.toggle('menu_active');
}

Final Step: index.htmlファイルにmaster.jsをつなげる

はい、最後はindex.htmlをひらいて、終わりの「body」タグの上にコードを追加していきましょう。

まとめ: レスポンシブヘッダーの動作を確認してみよう

これでレスポンシブ用のヘッダーは完成。

1回じゃ分からないと思うから、2回くらい読み返してみれば自然とレスポンシブヘッダーを作れるようになるからやってみて。

・他のJavaScriptツール
JavaScript DOMコードまとめ【jQueryなし】
JavaScriptでヘッダー画像を切り替えるコードを紹介

・前回の記事はこちら
Part1≫「レスポンシブ」ヘッダーを作る Part1【HTML編】
Part2≫「レスポンシブ」ヘッダーを作る Part2【CSS編】

終わりに全体のコードの流れをのせておくから確認してみよう。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/master.css">
  <title>Responsive</title>
</head>

<body>
  <header class="header_bg">
    <div class="header_contents">
      <h1>Responsive</h1>
      <div class="responsive_btn">
        <div class="menu_line"></div>
        <div class="menu_line"></div>
        <div class="menu_line"></div>
      </div>
      <nav class="header_nav">
        <ul class="header_nav_lists">
          <li><a class="nav_link" href="">About</a></li>
          <li><a class="nav_link" href="">Features</a></li>
          <li><a class="nav_link" href="">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <script src="js/master.js"></script>
</body>

</html>

/* Reset style */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fafafa;
  list-style: none;
  text-decoration: none;
}

/* Normal header style */
.header_bg {
  background: #323232;
  width: 100%;
  height: 80px;
}

.header_contents {
  width: 100%;
  max-width: 1024px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header_contents h1 {
  font-size: 22px;
  margin: 0 0 0 40px;
}

.header_nav_lists {
  display: flex;
}

.header_nav_lists li {
  margin: 0 40px 0 0;
}

.nav_link {
  font-size: 18px;
}

/* Responsive menu button */
.responsive_btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 40px 0 0;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.menu_line {
  background: #fafafa;
  border-radius: 5px;
  width: 100%;
  height: 5px;
  margin: 4px 0;
}

/* Responsive style */
@media screen and (max-width: 768px) {
  .responsive_btn {
    display: flex;
  }

  .header_bg {
    position: relative;
  }

  .header_nav {
    background: #323232;
    width: 100%;
    height: 100vh;
    padding: 80px 0 0 0;
    position: absolute;
    top: 0;
    right: -100%;
    transition: .5s;
  }

  .header_nav_lists {
    display: block;
    text-align: center;
  }

  .header_nav_lists li {
    margin: 0 0 40px;
    text-align: center;
  }

  .nav_link {
    font-size: 20px;
  }
}

/* js function "menuToggle" starting only */
.menu_active {
  right: 0;
}


const responsive_menu_btn = document.querySelector('.responsive_btn');
responsive_menu_btn.addEventListener('click', menuToggle);

function menuToggle() {
  const header_menu_detail = document.querySelector('.header_nav');
  header_menu_detail.classList.toggle('menu_active');
}