JavaScriptについて

JavaScript（JS）ファイルの作成と配置

① common.jsを作成
② index.htmlと同じ階層に配置
③ index.htmlの</body>の直前に、<script src="common.js"></script>を記述
④ common.jsに、掲載JSコードをコピペして保存

必要に応じて、ファイル名や配置は変更してOKです。
うまく機能しない場合は、「ファイル名」「ファイルの配置」「scriptタグの記述」が正しいかを確認してください。

common.js

"use strict";

// 以下にJavaScriptのコードを記載

【活用例】ハンバーガーメニュー_左からスライドを使う場合

"use strict";

// buttonにclass付与、ハンバーガーボタンを開閉
function toggleHamburger(el) {
  el.classList.toggle('open');
}
// navにclass付与
function toggleNav() {
  const nav = document.querySelector('.header-nav');
  if (nav) {
    nav.classList.toggle('active');
  }
}
// イベント登録
function initHamburger() {
  const hamburgers = document.querySelectorAll('.hamburger');
  hamburgers.forEach(el => {
    el.addEventListener('click', () => {
      toggleHamburger(el);
      toggleNav();
    });
  });
}
/* ---- まとめて呼び出し ---- */
document.addEventListener('DOMContentLoaded', () => {
  initHamburger();
});