https://restaurant-cresson.com/common/header.js

1/**
2 * ヘッダーを出力する関数
3 * @param {string} rootPath - 画像やリンクの基準となるパス（例: "." または ".."）
4 * @param {string} activePage - 現在のページID（'home', 'about', 'menu', 'contact', 'coupon'）
5 */
6function writeHeader(rootPath, activePage) {
7  
8  // ナビゲーションの設定
9  // id: ページID, name: 画像ファイル名のベース, text: スマホ用テキスト, link: リンク先
10  const navList = [
11    { id: 'home',    name: 'navi_home',    text: 'HOME',         link: rootPath + '/index.html' },
12    { id: 'about',   name: 'navi_about',   text: 'お店の紹介',   link: rootPath + '/about/index.html' },
13    { id: 'menu',    name: 'navi_menu',    text: 'メニュー',     link: rootPath + '/menu/index.html' },
14    { id: 'contact', name: 'navi_contact', text: 'お問い合わせ', link: rootPath + '/contact/index.html' },
15    { id: 'coupon',  name: 'navi_coupon',  text: 'クーポン',     link: rootPath + '/coupon/index.html' }
16  ];
17
18  // ナビゲーションのHTMLを生成
19  let navHtml = '';
20  navList.forEach(function(item) {
21    // 現在のページなら _1.jpg (アクティブ)、それ以外は _2.jpg
22    const imgSuffix = (item.id === activePage) ? '_1.jpg' : '_2.jpg';
23    const imgSrc = rootPath + '/common/' + item.name + imgSuffix;
24    
25    navHtml += `
26      <li>
27        <a href="${item.link}">
28          <img src="${imgSrc}" alt="${item.text}" class="nav-img">
29          <span class="nav-text">${item.text}</span>
30        </a>
31      </li>
32    `;
33  });
34
35  // ヘッダー全体のHTML
36  const headerHtml = `
37    <header>
38      <button class="hamburger-btn" id="js-hamburger">
39        <span></span>
40        <span></span>
41        <span></span>
42      </button>
43
44      <div class="header-visual">
45        <img src="${rootPath}/common/top_1.jpg" alt="店内の様子">
46        <img src="${rootPath}/common/top_2.jpg" alt="調理風景">
47        <img src="${rootPath}/common/top_3.jpg" alt="料理">
48      </div>
49
50      <nav class="global-nav" id="js-nav">
51        <ul>
52          ${navHtml}
53        </ul>
54      </nav>
55    </header>
56  `;
57
58  // HTMLを出力
59  document.write(headerHtml);
60
61  // ハンバーガーメニューの動作スクリプト（DOM読み込み後に実行）
62  document.addEventListener('DOMContentLoaded', function() {
63    const hamburgerBtn = document.getElementById('js-hamburger');
64    const globalNav = document.getElementById('js-nav');
65
66    if(hamburgerBtn && globalNav) {
67      hamburgerBtn.addEventListener('click', function() {
68        hamburgerBtn.classList.toggle('active');
69        globalNav.classList.toggle('active');
70      });
71
72      const navLinks = globalNav.querySelectorAll('a');
73      navLinks.forEach(function(link) {
74        link.addEventListener('click', function() {
75          hamburgerBtn.classList.remove('active');
76          globalNav.classList.remove('active');
77        });
78      });
79    }
80  });
81}