https://www.nantatsu.co.jp//mt-static/support/theme_static/dc_nantatsu/js/common.js

1/* smoothScroll */
2function smoothScroll() {
3  var urlHash = location.hash; //URLハッシュを取得
4  var speed = 500;
5  if (urlHash) {
6    $("body,html").stop().scrollTop(0);
7    setTimeout(function () {
8      var target = $(urlHash);
9      var position = target.offset().top;
10      $("body,html").stop().animate({ scrollTop: position }, speed, "swing");
11    }, 100);
12  }
13  $('a[href^="#"]').click(function () {
14    var speed = 500;
15    var href = $(this).attr("href");
16    var target = $(href == "#" || href == "" ? "html" : href);
17    var position = target.offset().top;
18    $("html, body").animate({ scrollTop: position }, speed, "swing");
19    return false;
20  });
21}
22smoothScroll();
23
24// ハンバーガーメニューを閉じる処理
25function closeHamburgerMenu() {
26  const hum = document.querySelector('.hum');
27  const container = document.querySelector('.header__nav__container');
28  const logo = document.querySelector('.header__logo__link');
29
30  if (hum) hum.classList.remove('is-active');
31  if (container) container.classList.remove('is-active');
32  if (logo) logo.classList.remove('is-active');
33}
34
35// ページ内リンククリックで閉じる処理
36document.addEventListener('click', function (e) {
37  const link = e.target.closest('.nav-main__item--sp .nav-sub__list .nav-sub__link');
38  if (!link) return;
39
40  const href = link.getAttribute('href');
41  // href が https://~#link のように # を含む場合のみ閉じる
42  if (href && href.includes('#')) {
43    closeHamburgerMenu();
44  }
45});
46
47// MV通過時にheaderを変える
48// function changeHeaderOnScroll() {
49//   const header = document.getElementById("header");
50//   const mv = document.querySelector(".mv, .sub-mv");
51//   // MV の高さを取得
52//   const mvHeight = mv.getBoundingClientRect().height ;
53 
54//   // スクロールイベントを監視
55//   window.addEventListener("scroll", function () {
56//     // 現在のスクロール量
57//     const scrollY = window.pageYOffset || document.documentElement.scrollTop;
58
59//     if (scrollY > mvHeight) {
60//       header.classList.add("is-active");
61//       //btnTop.classList.add("is-active");
62//     } else {
63//       header.classList.remove("is-active");
64//       //btnTop.classList.remove("is-active");
65//     }
66//   });
67// }
68// changeHeaderOnScroll();
69
70
71// ハンバーガーメニューのトグル
72function toggleHamburgerMenu() {
73  const hum = document.querySelector(".hum");
74  const container = document.querySelector(".header__nav__container");
75  const logo = document.querySelector(".header__logo__link");
76  // console.log("hum", hum);
77  hum.addEventListener("click", function () {
78    console.log("clicked");
79    this.classList.toggle("is-active");
80    container.classList.toggle("is-active");
81    logo.classList.toggle("is-active");
82  });
83}
84toggleHamburgerMenu();
85
86// メガメニューのホバーイベント
87function megaMenuHover() {
88  const megamenu = document.querySelectorAll(".megamenu__link");
89  const navUpperLink = document.querySelectorAll(".nav-upper__link");
90  const navMainLink = document.querySelectorAll(".nav-main__link");
91  const navSubListWrap = document.querySelectorAll(".nav-sub__list__wrap");
92  const logo = document.querySelector(".header__logo__link");
93  const overlay = document.querySelector(".megamenu-overlay");
94  
95  if (window.innerWidth <= 1023) return;
96
97  megamenu.forEach((menu) => {
98    menu.addEventListener("mouseenter", function (e) {
99      e.preventDefault();
100      // let nextSibling = this.nextElementSibling;
101      // nextSibling.classList.add("is-active");
102  
103      navUpperLink.forEach((upper) => {
104        upper.classList.add("is-active");
105      });
106      navMainLink.forEach((main) => {
107        main.classList.add("is-active");
108      });
109      this.classList.add("is-rotate");
110      logo.classList.add("is-active");
111      overlay.classList.add("is-active");
112      
113    });
114    menu.addEventListener("mouseleave", function (e) {
115      e.preventDefault();
116      // let nextSibling = this.nextElementSibling;
117      // nextSibling.classList.remove("is-active");
118      navUpperLink.forEach((upper) => {
119        upper.classList.remove("is-active");
120      });
121      navMainLink.forEach((main) => {
122        main.classList.remove("is-active");
123      });
124      this.classList.remove("is-rotate");
125      logo.classList.remove("is-active");
126      overlay.classList.remove("is-active");
127    });

128  });
129  navSubListWrap.forEach((subList) => {
130    subList.addEventListener("mouseenter", function (e) {
131      console.log("hovered A");
132      e.preventDefault();     
133      // this.classList.add("is-active");
134      navUpperLink.forEach((upper) => {
135        upper.classList.add("is-active");
136      });
137      let prevElement = this.previousElementSibling;
138      prevElement.classList.add("is-rotate");
139      navMainLink.forEach((main) => {
140        main.classList.add("is-active");
141      });
142      logo.classList.add("is-active");
143      overlay.classList.add("is-active");
144    });
145    subList.addEventListener("mouseleave", function (e) {
146      console.log("hovered B");
147      e.preventDefault();
148      // this.classList.remove("is-active");
149      let prevElement = this.previousElementSibling;
150      prevElement.classList.remove("is-rotate");
151      navUpperLink.forEach((upper) => {
152        upper.classList.remove("is-active");
153      });
154      navMainLink.forEach((main) => {
155        main.classList.remove("is-active");
156      });
157      logo.classList.remove("is-active");
158      overlay.classList.remove("is-active");
159    });
160  });
161}
162megaMenuHover();
163
164// ハンバーガーメニュー内リスト展開
165const hamburgerMenuLinks = document.querySelectorAll(".megamenu__link");
166hamburgerMenuLinks.forEach((link) => {
167  link.addEventListener("click", function (e) {
168    if (window.innerWidth > 1023) return;
169
170    e.preventDefault();
171    console.log("closed other sublist A");
172
173    const subList = this.nextElementSibling;
174
175    const isOpen = subList.classList.contains("is-active");
176
177    // まず他のサブリストをすべて閉じる
178    document.querySelectorAll(".megamenu__link").forEach((otherLink) => {
179      const otherSubList = otherLink.nextElementSibling;
180      otherSubList.classList.remove("is-active");
181      otherLink.classList.remove("is-active");
182      //otherSubList.classList.toggle("is-active");
183      //otherLink.classList.toggle("is-active");
184      otherSubList.style.maxHeight = "0";
185      console.log("closed other sublist");
186    });
187
188    console.log("closed other sublist C");
189
190    if (!isOpen) {
191      console.log("clicked A");
192      // 一度クラスを付けてから次のフレームで高さを設定
193      subList.classList.add("is-active");
194      this.classList.add("is-active");
195      subList.style.maxHeight = "0"; // 初期化
196
197      requestAnimationFrame(() => {
198        subList.style.maxHeight = subList.scrollHeight + "px";
199      });
200    } else {
201      console.log("clicked B");
202      subList.style.maxHeight = subList.scrollHeight + "px";
203      requestAnimationFrame(() => {
204        subList.style.maxHeight = "0";
205      });
206      subList.classList.remove("is-active");
207      this.classList.remove("is-active");
208    }
209  });
210});