https://securenas.com/assets/js/header_styles.js

1(function($) {
2  const $servicesTrigger = $('#securMegaToggle');   // Services
3  const $solutionTrigger = $('#securMegaToggle2');  // Solution2
4  const $socTrigger = $('#securMegaToggle3');       // SOC Solution
5  const $parents = $('.secur-mega-parent');
6  const $overlay = $('#securMegaOverlay');
7
8  const panels = {
9    '#securMegaToggle': $('#securMegaPanelServices'),
10    '#securMegaToggle2': $('#securMegaPanelSolution2'),
11    '#securMegaToggle3': $('#securMegaPanelSOC')    // NEW PANEL
12  };
13
14  const $allPanels = $('.secur-mega-panel');
15  const $allTriggers = $servicesTrigger.add($solutionTrigger).add($socTrigger);
16
17  const isDesktop = () => window.innerWidth >= 992;
18
19  function openMega(triggerEl) {
20    const triggerId = '#' + triggerEl.id;
21    const $panel = panels[triggerId];
22    if (!$panel) return;
23
24    $allPanels.stop(true, true).hide().attr('aria-hidden', 'true');
25    $panel.stop(true, true).fadeIn(150).attr('aria-hidden', 'false');
26
27    $allTriggers.removeClass('secur-mega-active');
28    $(triggerEl).addClass('secur-mega-active');
29
30    if (!isDesktop()) $overlay.fadeIn(150);
31  }
32
33  function closeMega() {
34    $allPanels.fadeOut(150).attr('aria-hidden', 'true');
35    $allTriggers.removeClass('secur-mega-active');
36    if (!isDesktop()) $overlay.fadeOut(150);
37  }
38
39  // Desktop hover
40  $parents.on('mouseenter', function() {
41    if (!isDesktop()) return;
42    const $a = $(this).children('a').first();
43    if ($a.length) openMega($a.get(0));
44  });
45
46  // Keep open while hovering panels
47  $allPanels.on('mouseenter', function() {
48    if (!isDesktop()) return;
49  }).on('mouseleave', function() {
50    if (!isDesktop()) return;
51    closeMega();
52  });
53
54  // Mobile click
55  $allTriggers.on('click', function(e) {
56    if (isDesktop()) return;
57    e.preventDefault();
58    const $panel = panels['#' + this.id];
59    if ($panel.is(':visible')) closeMega();
60    else openMega(this);
61  });
62
63  // Close on overlay / escape
64  $overlay.on('click', closeMega);
65  $(document).on('keyup', e => { if (e.key === 'Escape') closeMega(); });
66
67  // Reset on resize
68  $(window).on('resize', () => {
69    $overlay.hide();
70    $allPanels.hide().attr('aria-hidden', 'true');
71    $allTriggers.removeClass('secur-mega-active');
72  });
73})(jQuery);