https://www.pluscad.jp/common/js/comp/header-new.js

1function megaMenuPc() {
2const manuBg = document.querySelector('#menuBg');
3const menuParents = document.querySelectorAll('.js-megamenuParent');
4
5const allChildTrigger = document.querySelectorAll('.js-childTrigger');
6const allChildContent = document.querySelectorAll('.js-childContent');
7
8menuParents.forEach((parent) => {
9  const trigger = parent.querySelector('.js-megamenuTrigger');
10  const panel = parent.querySelector('.js-megamenuPanel');
11
12  if( trigger === null || panel === null ) return;
13
14  parent.addEventListener('mouseover', () => {
15    parent.classList.add('is-active');
16    manuBg.classList.add('is-active');
17    panel.classList.add('is-active');
18    trigger.classList.add('is-active');
19  });
20
21  parent.addEventListener('mouseleave', () => {
22    parent.classList.remove('is-active');
23    manuBg.classList.remove('is-active');
24    panel.classList.remove('is-active');
25    trigger.classList.remove('is-active');
26    allChildTrigger.forEach((trigger) => {
27      trigger.classList.remove('is-active');
28    });
29    allChildContent.forEach((content) => {
30      content.classList.remove('is-active');
31    });
32  });
33
34  const childparent = parent.querySelectorAll('.js-childParent');
35
36  childparent.forEach((child) => {
37    const childTrigger = child.querySelector('.js-childTrigger');
38    const childContent = child.querySelector('.js-childContent');
39
40    if( childTrigger === null || childContent === null ) return;
41
42    child.addEventListener('mouseover', () => {
43      allChildTrigger.forEach((trigger) => {
44        trigger.classList.remove('is-active');
45      });
46      allChildContent.forEach((content) => {
47        content.classList.remove('is-active');
48      });
49      childContent.classList.add('is-active');
50      childTrigger.classList.add('is-active');
51    });
52  
53    // child.addEventListener('mouseleave', () => {
54    //   childContent.classList.remove('is-active');
55    //   childTrigger.classList.remove('is-active');
56    // });
57  });
58});
59
60const softParent = document.querySelector('.js-softParent');
61const softPanel = document.querySelector('.js-softPanel');
62const softButtons = document.querySelectorAll('.js-softButton');
63
64softParent.addEventListener('mouseover', () => {
65  softParent.classList.add('is-active');
66  manuBg.classList.add('is-active');
67  softPanel.classList.add('is-active');
68  trigger.classList.add('is-active');
69});
70
71softParent.addEventListener('mouseleave', () => {
72  softParent.classList.remove('is-active');
73  manuBg.classList.remove('is-active');
74  softPanel.classList.remove('is-active');
75  trigger.classList.remove('is-active');
76  allChildTrigger.forEach((trigger) => {
77    trigger.classList.remove('is-active');
78  });
79  allChildContent.forEach((content) => {
80    content.classList.remove('is-active');
81  });
82});
83
84const buyParent = document.querySelector('.js-buyParent');
85const buyPanel = document.querySelector('.js-buyPanel');
86const buyButtons = document.querySelectorAll('.js-buyButton');
87
88buyParent.addEventListener('mouseover', () => {
89  buyParent.classList.add('is-active');
90  manuBg.classList.add('is-active');
91  buyPanel.classList.add('is-active');
92  trigger.classList.add('is-active');
93});
94
95buyParent.addEventListener('mouseleave', () => {
96  buyParent.classList.remove('is-active');
97  manuBg.classList.remove('is-active');
98  buyPanel.classList.remove('is-active');
99  trigger.classList.remove('is-active');
100  allChildTrigger.forEach((trigger) => {
101    trigger.classList.remove('is-active');
102  });
103  allChildContent.forEach((content) => {
104    content.classList.remove('is-active');
105  });
106});
107
108}
109
110function megaMenuSp() {
111// ハンバーガーメニュー
112let hambButton = document.querySelector('.js-hambButton');
113const hambPanel = document.querySelector('.js-hambPanel');
114const body = document.querySelector('body');
115
116hambButton.addEventListener('click', () => {
117  // hambButtonのclassListを取得
118  hambButton = document.querySelector('.js-hambButton');
119  const hambButtonClassList = hambButton.classList;
120  // hambButtonがis-openを持っている時
121  if(hambButtonClassList.contains('is-open')) {
122    hambButtonClassList.remove('is-open');
123    hambPanel.classList.remove('is-open');
124    body.style.overflow = 'auto';
125  }
126  // hambButtonがis-openを持っていない時
127  else {
128    hambButtonClassList.add('is-open');
129    hambPanel.classList.add('is-open');
130    body.style.overflow = 'hidden';
131  }
132});
133window.addEventListener('resize', () => {
134  if(window.innerWidth > 1160) {
135    hambButton.classList.remove('is-open');
136    hambPanel.classList.remove('is-open');
137    body.style.overflow = 'auto';
138  }
139});
140
141  const menuParents = document.querySelectorAll('.js-megamenuParent');
142  

143  menuParents.forEach((parent) => {
144    const trigger = parent.querySelector('.js-megamenuTrigger');
145    const panel = parent.querySelector('.js-megamenuPanel');
146  
147    const childparent = parent.querySelectorAll('.js-childParent');
148  
149    if( trigger === null || panel === null ) return;
150  
151    trigger.addEventListener('click', () => {
152      if(!parent.classList.contains('is-active')) {
153        parent.classList.add('is-active');
154        panel.classList.add('is-active');
155        trigger.classList.add('is-active');
156      }
157      else {
158        parent.classList.remove('is-active');
159        panel.classList.remove('is-active');
160        trigger.classList.remove('is-active');
161      
162        childparent.forEach((child) => {
163          child.classList.remove('is-active');
164          child.querySelector('.js-childContent').classList.remove('is-active');
165          child.querySelector('.js-childTrigger').classList.remove('is-active');
166        });
167      }
168    });
169
170    const parentBackButton = parent.querySelector('.js-parentBackButton');
171
172    if (parentBackButton === null) return;
173
174    parentBackButton.addEventListener('click', () => {
175      parent.classList.remove('is-active');
176      panel.classList.remove('is-active');
177      trigger.classList.remove('is-active');
178    });
179  
180    childparent.forEach((child) => {
181      const childTrigger = child.querySelector('.js-childTrigger');
182      const childContent = child.querySelector('.js-childContent');
183  
184      if( childTrigger === null || childContent === null ) return;
185  
186      child.addEventListener('click', () => {
187        if(!childContent.classList.contains('is-active')) {
188        // clickされた以外のchildからis-activeを削除
189        childparent.forEach((child) => {
190          child.querySelector('.js-childContent').classList.remove('is-active');
191          child.querySelector('.js-childTrigger').classList.remove('is-active');
192        });
193        childContent.classList.add('is-active');
194        childTrigger.classList.add('is-active');
195        }
196        // else {
197        //   childContent.classList.remove('is-active');
198        //   childTrigger.classList.remove('is-active');
199        // }
200      });
201
202      const childBackButton = child.querySelector('.js-childBackButton');
203
204      if (childBackButton === null) return;
205
206      childBackButton.addEventListener('click', (event) => {
207        event.stopPropagation();
208        childContent.classList.remove('is-active');
209        childTrigger.classList.remove('is-active');
210      });
211
212    });
213  });
214
215  
216  const softButtons = document.querySelectorAll('.js-softButton');
217  const softPanel = document.querySelector('.js-softPanel');
218  const softParent = document.querySelector('.js-softParent');
219  const softBackButton = document.querySelector('.js-softBackButton');
220
221  softButtons.forEach((softButton) => {
222    softButton.addEventListener('click', () => {
223      // hambButtonのclassListを取得
224      hambButton = document.querySelector('.js-hambButton');
225      const hambButtonClassList = hambButton.classList;
226      hambButtonClassList.add('is-open');
227      hambPanel.classList.add('is-open');
228
229      menuParents.forEach((parent) => {
230        parent.classList.remove('is-active');
231        const panel = parent.querySelector('.js-megamenuPanel');
232        const trigger = parent.querySelector('.js-megamenuTrigger');
233        if (panel !== null && trigger !== null) {
234          panel.classList.remove('is-active');
235          trigger.classList.remove('is-active');
236        }
237      });
238
239      const childparent = document.querySelectorAll('.js-childParent');
240
241      childparent.forEach((child) => {
242        child.classList.remove('is-active');
243        const childContent = child.querySelector('.js-childContent');
244        const childTrigger = child.querySelector('.js-childTrigger');
245        if (childContent !== null && childTrigger !== null) {
246          childContent.classList.remove('is-active');
247          childTrigger.classList.remove('is-active');
248        }
249      });
250
251      softPanel.classList.add('is-active');
252      softParent.classList.add('is-active');
253    });
254  });
255
256  softBackButton.addEventListener('click', () => {
257    softPanel.classList.remove('is-active');
258    softParent.classList.remove('is-active');
259  });
260
261  

262  const buyButtons = document.querySelectorAll('.js-buyButton');
263  const buyPanel = document.querySelector('.js-buyPanel');
264  const buyParent = document.querySelector('.js-buyParent');
265  const buyBackButton = document.querySelector('.js-buyBackButton');
266
267  buyButtons.forEach((buyButton) => {
268    buyButton.addEventListener('click', () => {
269      // hambButtonのclassListを取得
270      hambButton = document.querySelector('.js-hambButton');
271      const hambButtonClassList = hambButton.classList;
272      hambButtonClassList.add('is-open');
273      hambPanel.classList.add('is-open');
274
275      menuParents.forEach((parent) => {
276        parent.classList.remove('is-active');
277        const panel = parent.querySelector('.js-megamenuPanel');
278        const trigger = parent.querySelector('.js-megamenuTrigger');
279        if (panel !== null && trigger !== null) {
280          panel.classList.remove('is-active');
281          trigger.classList.remove('is-active');
282        }
283      });
284
285      const childparent = document.querySelectorAll('.js-childParent');
286
287      childparent.forEach((child) => {
288        child.classList.remove('is-active');
289        const childContent = child.querySelector('.js-childContent');
290        const childTrigger = child.querySelector('.js-childTrigger');
291        if (childContent !== null && childTrigger !== null) {
292          childContent.classList.remove('is-active');
293          childTrigger.classList.remove('is-active');
294        }
295      });
296
297      buyPanel.classList.add('is-active');
298      buyParent.classList.add('is-active');
299    });
300  });
301
302  buyBackButton.addEventListener('click', () => {
303    buyPanel.classList.remove('is-active');
304    buyParent.classList.remove('is-active');
305  });
306}
307
308window.addEventListener('DOMContentLoaded', () => {
309  if(window.innerWidth > 1160) {
310    megaMenuPc();
311  } else {
312    megaMenuSp();
313  }
314});
315
316window.addEventListener('resize', () => {
317  if(window.innerWidth > 1160) {
318    megaMenuPc();
319  } else {
320    megaMenuSp();
321  }
322});