https://truebluesalon.com/wp-content/themes/ph-base-tailwind/asset…desktop-nav-dropdowns.rolldown.js?ver=1.0.0

1/* (function() {
2  // Get all menu links with subnav dropdown
3  const links = document.querySelectorAll('#nav-main [data-link]');
4
5  // Initialize the menu links
6  function initMenuLinks() {
7    links?.forEach(link => {
8    // Get the subnav dropdown for this link
9    const subnav = link.closest('li').querySelector('.is_subnav')
10    // If there's no subnav, skip to the next link
11    if (!subnav) return
12
13    // Get the height of the subnav and store it as a data attribute
14    const navHeight = subnav.getBoundingClientRect().height;
15    subnav.dataset.height = navHeight;
16
17    // Initialize the subnav's styles
18    subnav.style.maxHeight = 0;
19    subnav.style.opacity = 1;
20    subnav.setAttribute('aria-expanded', false);
21
22    // Add a mouseover event listener to open the dropdown
23    link.addEventListener('mouseover', mouseOver);
24    })
25  }
26
27  // Open the dropdown when the menu link is hovered over
28  function mouseOver(e) {
29    // Get the subnav dropdown for this link
30    const subnav = e.target.closest('li').querySelector('.is_subnav');
31
32    // Expand the dropdown and set the aria-expanded attribute to true
33    subnav.style.maxHeight = `${subnav.dataset.height}px`;
34    subnav.setAttribute('aria-expanded', true);
35
36    // Add a mouseleave event listener to close the dropdown when the mouse leaves the link
37    const li = e.target.closest('li');
38    li.addEventListener('mouseleave', mouseOut);
39  }
40
41  // Close the dropdown when the mouse leaves the link
42  function mouseOut(e) {
43    const li = e.target;
44    const subnav = li.querySelector('.is_subnav');
45
46    // Collapse the dropdown and set the aria-expanded attribute to false
47    subnav.style.maxHeight = 0;
48    subnav.setAttribute('aria-expanded', false);
49  }
50
51  // Initialize the menu links
52  initMenuLinks();
53
54})() */
55
56
57
58
59/*****************************
60OOOOLD CODE
61*****************************
62(function() {
63  // declare the things
64  const links = document.querySelectorAll('#nav-main [data-link]');
65  
66  function initMenuLinks() {
67    links?.forEach(link => {
68      const subnav = link.closest('li').querySelector('.is_subnav')
69      if (!subnav) return
70      
71      const navHeight = subnav.getBoundingClientRect().height;
72      subnav.dataset.height = navHeight;
73      
74      subnav.style.maxHeight = 0;
75      subnav.style.opacity = 1;
76      subnav.setAttribute('aria-expanded', false);
77      
78      link.addEventListener('mouseover', mouseOver);
79    })
80  }
81  
82  // when hover, open dropdown
83  function mouseOver(e) {
84    const subnav = e.target.closest('li').querySelector('.is_subnav');
85    
86    subnav.style.maxHeight = `${subnav.dataset.height}px`;
87    subnav.setAttribute('aria-expanded', true);
88    
89    const li = e.target.closest('li');
90    
91    li.addEventListener('mouseleave', mouseOut);
92  }
93  
94  // when mouse leaves, close dropdown
95  function mouseOut(e) {
96    const li = e.target;
97    li.querySelector('.is_subnav').style.maxHeight = 0;
98    subnav.setAttribute('aria-expanded', false);
99  }
100  
101  // do the stuff
102  initMenuLinks();
103})() */