https://mkt-static.bitly.com/static/1789049297/pages/wp-content/th…/assets/scripts/mega-menu.js

1jQuery(document).ready(function ($) {
2  $(".top-bar .menu-icon").on("click", function () {
3    var bod = $("html, body");
4    var navContainer = $(".top-bar .top-bar-right");
5    var nav = $(".top-bar .nav-wrap");
6    var announcements = $(".announcements");
7
8    bod.toggleClass("menu-open");
9    navContainer.toggleClass("nav-open");
10    nav.toggleClass("open");
11    announcements.toggleClass("hidden");
12  });
13
14  $(".top-bar li.menu-item-has-children > a").on(
15    "click touchend",
16    function (e) {
17      if (
18        e.target.nodeName === "A" &&
19        !$(e.target).closest(".mega-menu__container-inner").length
20      ) {
21        e.preventDefault();
22      }
23
24      // Check if the closest click was within the mega menu, return if it was
25      if ($(e.target).closest(".mega-menu__container-inner").length) {
26        return;
27      }
28
29      // If the window is above 1023px, bail
30      if ($(window).width() > 1023) {
31        return;
32      }
33
34      var megaMenu = $(this).parent().find(".mega-menu__container-inner");
35      var megaMenuActiveItemTitle = $('[data-js="active-menu-item"]');
36      var container = $(".nav-wrap.open");
37
38      // Check if the window is between 767px and 1023px to handle accordion behavior
39      if ($(window).width() > 767 && $(window).width() <= 1023) {
40        $(this).parent().toggleClass("active");
41        container.css("overflow-y", "auto");
42        megaMenu.toggleClass("open").parent().toggleClass("active");
43        return;
44      }
45
46      container.css("overflow-y", "auto");
47      megaMenu.addClass("open");
48      megaMenuActiveItemTitle.text($(this).text()).toggleClass("bold");
49    }
50  );
51
52  $('[data-js="active-menu-item"]').on("click", function () {
53    // Return if the active item has the text "Menu"
54    if ($(this).text() === "Menu") return;
55
56    var container = $(".nav-wrap.open");
57    var megaMenu = $(".mega-menu__container-inner.open");
58    var sideMenu = $("#sidemenu");
59
60    container.css("overflow-y", "hidden");
61    megaMenu.removeClass("open");
62    sideMenu.removeClass("mega-menu-open");
63
64    $(this).text("Menu").toggleClass("bold");
65  });
66
67  // Check for window resize to reset nav container overflow
68  $(window).on("resize", function () {
69    var container = $(".nav-wrap");
70    // Check if the window is between above 1023px to remove the overflow hidden
71    if ($(window).width() > 1023) {
72      container.css("overflow-y", "unset");
73    }
74  });
75
76  // Set the proper event listener for A tag "clicks" using the enter key
77  $(".mega-menu__sub-menu li a").on("keydown", function (e) {
78    if (e.keyCode === 13) {
79      this.click();
80    }
81  });
82
83  // Set active class on the current page
84  let currentUrl = window.location.href;
85  let $menuItems = $(".mega-menu__sub-menu--content li");
86
87  $menuItems.each(function () {
88    let $this = $(this);
89    let $thisUrl = $this.find("a").attr("href");
90
91    if (currentUrl === $thisUrl) {
92      $this.addClass("active");
93    }
94  });
95
96  // Change img to svg.
97  $subMenuImgs = $(".mega-menu__sub-menu--content li.active img");
98  if ($subMenuImgs.length > 0) {
99    $subMenuImgs.each(function () {
100      let $img = jQuery(this);
101      let imgURL = $img.attr("src");
102
103      // Check if the img url contains a .svg extension
104      if (imgURL.indexOf(".svg") === -1) {
105        return;
106      }
107
108      jQuery.get(
109        imgURL,
110        function (data) {
111          let $svg = jQuery(data).find("svg");
112          $svg = $svg.removeAttr("xmlns:a");
113          $img.replaceWith($svg);
114        },
115        "xml"
116      );
117    });
118  }
119});