https://www.bsfuji.tv/odorubsf_2026/nav/nav.js

1/* ============================================================
2   odoru.com グローバルナビゲーション JS（切り出し版）
3   ------------------------------------------------------------
4   元サイトの実装（jQuery依存）:
5     $("#menuBtn, #menuBtn2, .menuOff").on("click", function () {
6       $("#menuBtn, #menuBtn2").fadeToggle(100);
7       $("#navAll").fadeToggle(300);
8     });
9
10   jQuery を読み込まなくても動くよう、素のJavaScriptで
11   同じ開閉動作（ボタンの入れ替え＋メニューのフェード表示）を
12   再現しています。nav.html / nav.css と一緒に読み込んでください。
13
14   ページ側で既に jQuery を使っている場合でも、このスクリプトは
15   jQueryなしで動作するので、そのまま共存できます。
16============================================================ */
17(function () {
18  "use strict";
19
20  function initOdoruNav() {
21    var menuBtn = document.getElementById("menuBtn");
22    var menuBtn2 = document.getElementById("menuBtn2");
23    var navAll = document.getElementById("navAll");
24
25    if (!menuBtn || !menuBtn2 || !navAll) {
26      return; // nav.html が読み込まれていない
27    }
28
29    var isOpen = false;
30    var closeTimer = null;
31
32    function openMenu() {
33      isOpen = true;
34      window.clearTimeout(closeTimer);
35
36      menuBtn.style.display = "none";
37      menuBtn2.style.display = "block";
38
39      navAll.style.display = "block";
40      // display:none -> block にした直後に opacity を変えないと
41      // トランジションが効かないため、次のフレームで反映する
42      requestAnimationFrame(function () {
43        navAll.style.opacity = "1";
44      });
45    }
46
47    function closeMenu() {
48      isOpen = false;
49
50      menuBtn.style.display = "block";
51      menuBtn2.style.display = "none";
52
53      navAll.style.opacity = "0";
54      closeTimer = window.setTimeout(function () {
55        if (!isOpen) {
56          navAll.style.display = "none";
57        }
58      }, 300); // nav.css の transition: opacity 0.3s と合わせる
59    }
60
61    function toggleMenu() {
62      if (isOpen) {
63        closeMenu();
64      } else {
65        openMenu();
66      }
67    }
68
69    menuBtn.addEventListener("click", toggleMenu);
70    menuBtn2.addEventListener("click", toggleMenu);
71
72    // メニュー内のリンク（.menuOff）をクリックしたらメニューを閉じる
73    navAll.addEventListener("click", function (event) {
74      if (event.target.closest && event.target.closest(".menuOff")) {
75        closeMenu();
76      }
77    });
78  }
79
80  if (document.readyState === "loading") {
81    document.addEventListener("DOMContentLoaded", initOdoruNav);
82  } else {
83    initOdoruNav();
84  }
85})();