https://saga.coop/assets/js/nav_hum.js

1// JavaScript Document
2
3document.addEventListener("DOMContentLoaded", function() {
4    const hamburgerContent = document.getElementById("hamburgerContent");
5    const hamburgerMenu = document.getElementById("hamburgerMenu");
6    const body = document.body; // body要素を取得
7    let closeBtn;
8
9    // ハンバーガーメニューコンテンツを挿入
10    if (hamburgerContent) {
11        hamburgerContent.innerHTML = sidebarContent;
12        initializeHumburgerAccordion(); // ハンバーガーメニューのアコーディオンを初期化
13    }
14
15    // ハンバーガーメニューの動作
16    hamburgerMenu.addEventListener("click", function() {
17        hamburgerContent.style.display = "block"; // メニューを表示
18        body.classList.add("no-scroll"); // スクロールを無効にする
19        setTimeout(function() {
20            hamburgerContent.classList.add("visible"); // フェードインのアニメーションを実行
21            closeBtn = document.getElementById("closeHamburgerBtn"); // 閉じるボタンを再取得
22            setupCloseButton(); // 閉じるボタンの動作を設定
23        }, 10); // 微小な遅延を追加してアニメーションが確実に実行されるように
24    });
25
26    // コンテンツ外をクリックしたときにメニューを閉じる
27    document.addEventListener("click", function(event) {
28        // ハンバーガーメニューのコンテンツ部分をクリックしていない場合
29        if (!hamburgerContent.contains(event.target) && !hamburgerMenu.contains(event.target)) {
30            closeHamburgerMenu(); // メニューを閉じる処理を実行
31        }
32    });
33
34    // 閉じるボタンの動作
35    function setupCloseButton() {
36        if (closeBtn) {
37            closeBtn.addEventListener("click", function() {
38                closeHamburgerMenu(); // メニューを閉じる処理
39            });
40        }
41    }
42
43    // メニューを閉じる処理
44    function closeHamburgerMenu() {
45        resetHamburgerAccordion(); // アコーディオンをリセット
46        hamburgerContent.classList.add("fade-out"); // フェードアウトのアニメーション
47        body.classList.remove("no-scroll"); // スクロールを再有効化
48        setTimeout(function() {
49            hamburgerContent.classList.remove("visible", "fade-out");
50            hamburgerContent.style.display = "none"; // 完全に非表示にする
51        }, 700); // フェードアウトが完了するまで待機
52    }
53});
54
55
56// ハンバガーメニュー用アコーディオンの初期化関数
57function initializeHumburgerAccordion() {
58    const accordionHeaders = Array.from(document.querySelectorAll('#hamburgerContent .accordion-header'));
59
60    accordionHeaders.forEach(header => {
61        header.removeEventListener('click', accordionClickHandler);
62        header.addEventListener('click', accordionClickHandler);
63    });
64}
65
66// アコーディオンをリセットする関数
67function resetHamburgerAccordion() {
68    const accordionHeaders = Array.from(document.querySelectorAll('#hamburgerContent .accordion-header'));
69    const accordionContents = Array.from(document.querySelectorAll('#hamburgerContent .accordion-content'));
70
71    // 全てのアコーディオンを閉じた状態にする
72    accordionHeaders.forEach(header => {
73        header.classList.remove('active');
74    });
75    accordionContents.forEach(content => {
76        content.style.maxHeight = null;
77        content.style.opacity = 0;
78    });
79}
80
81// アコーディオンの開閉処理（共通）
82function accordionClickHandler(event) {
83    const header = event.currentTarget;
84    const content = header.nextElementSibling;
85
86    // 他のアコーディオンを閉じる処理
87    const accordionHeaders = Array.from(header.closest('nav').querySelectorAll('.accordion-header'));
88    accordionHeaders.forEach(h => {
89        if (h !== header) {
90            h.classList.remove('active');
91            h.nextElementSibling.style.maxHeight = null;
92            h.nextElementSibling.style.opacity = 0;
93        }
94    });
95
96    // クリックされたアコーディオンの開閉を切り替える
97    if (content.style.maxHeight) {
98        content.style.maxHeight = null;
99        content.style.opacity = 0;
100        header.classList.remove('active');
101    } else {
102        content.style.maxHeight = content.scrollHeight + "px";
103        content.style.opacity = 1;
104        header.classList.add('active');
105    }
106}
107
108
109