https://testmate.in/js/menu.js

1const menu = document.querySelector(".menu-block");
2const menuMain = menu?.querySelector(".site-menu-main");
3const submenuAll = menu?.querySelectorAll(".sub-menu");
4const menuTrigger = document.querySelector(".mobile-menu-trigger");
5const closeMenu = menu?.querySelector(".mobile-menu-close");
6const body = document.querySelector("body");
7const menuOverlay = document.querySelector(".menu-overlay");
8
9let subMenu;
10let subMenuArray = [];
11let subMenuTextArray = [];
12
13function last(array) {
14  return array[array.length - 1];
15}
16
17function last2(array) {
18  return array[array.length - 2];
19}
20
21menuMain?.addEventListener("click", (e) => {
22
23  if (!menu.classList.contains("active")) {
24    return;
25  }
26  if (e.target.closest(".nav-item-has-children")) {
27    const hasChildren = e.target.closest(".nav-item-has-children");
28
29    showSubMenu(hasChildren);
30  }
31
32});
33
34function toggleMenu() {
35  menu.classList.toggle("active");
36  menuOverlay.classList.toggle("active");
37  menu.classList.add("transition");
38  menuOverlay.classList.add("transition");
39}
40
41menuTrigger?.addEventListener("click", () => {
42  toggleMenu();
43})
44
45closeMenu?.addEventListener("click", () => {
46  toggleMenu();
47})
48
49menuOverlay.addEventListener("click", () => {
50  toggleMenu();
51})
52
53window.addEventListener("resize", function () {
54  if (menu.classList.contains("transition")) {
55    menu.classList.remove("transition");
56  }
57  if (menuOverlay.classList.contains("transition")) {
58    menuOverlay.classList.remove("transition");
59  }
60})
61
62function showSubMenu(hasChildren) {
63  subMenu = hasChildren.querySelector(".sub-menu");
64  subMenu.classList.toggle("active");
65}
66
67window.onresize = function () {
68  if (this.innerWidth > 991) {
69    if (menu.classList.contains("active")) {
70      toggleMenu();
71    }
72  }
73}
74
75window.onscroll = function () {
76  scrollFunction();
77};
78
79function scrollFunction() {
80  if (
81    document.body.scrollTop > 50 ||
82    document.documentElement.scrollTop > 50
83  ) {
84    $(".site-header--sticky").addClass("scrolling");
85  } else {
86    $(".site-header--sticky").removeClass("scrolling");
87  }
88  if (
89    document.body.scrollTop > 700 ||
90    document.documentElement.scrollTop > 700
91  ) {
92    $(".site-header--sticky.scrolling").addClass("reveal-header");
93  } else {
94    $(".site-header--sticky.scrolling").removeClass("reveal-header");
95  }
96}