https://www.kpit.com/wp-content/themes/kpit-wp/assets/js/megamenu.js

1if ($(window).outerWidth() <= 990) {
2  this.MobileNav = function () {
3    this.curItem,
4      (this.curLevel = 0),
5      (this.transitionEnd = _getTransitionEndEventName());
6
7    var defaults = {
8      initElem: ".main-menu",
9      menuTitle: "Menu",
10    };
11
12    // Check if MobileNav was initialized with some options and assign them to the "defaults"
13    if (arguments[0] && typeof arguments[0] === "object") {
14      this.options = extendDefaults(defaults, arguments[0]);
15    }
16
17    // Add to the "defaults" ONLY if the key is already in the "defaults"
18    function extendDefaults(source, extender) {
19      for (option in extender) {
20        if (source.hasOwnProperty(option)) {
21          source[option] = extender[option];
22        }
23      }
24    }
25
26    MobileNav.prototype.getCurrentItem = function () {
27      return this.curItem;
28    };
29
30    MobileNav.prototype.setMenuTitle = function (title) {
31      defaults.menuTitle = title;
32      _updateMenuTitle(this);
33      return title;
34    };
35
36    // Init is an anonymous IIFE
37    (function (MobileNav) {
38      var initElem = $(defaults.initElem).length ? $(defaults.initElem) : false;
39
40      if (initElem) {
41        defaults.initElem = initElem;
42        _clickHandlers(MobileNav);
43        _updateMenuTitle(MobileNav);
44      } else {
45        console.log(
46          defaults.initElem + " element doesn't exist, menu not initialized."
47        );
48      }
49    })(this);
50
51    function _getTransitionEndEventName() {
52      var i,
53        undefined,
54        el = document.createElement("div"),
55        transitions = {
56          transition: "transitionend",
57          OTransition: "otransitionend", // oTransitionEnd in very old Opera
58          MozTransition: "transitionend",
59          WebkitTransition: "webkitTransitionEnd",
60        };
61
62      for (i in transitions) {
63        if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
64          return transitions[i];
65        }
66      }
67    }
68
69    function _clickHandlers(menu) {
70      defaults.initElem.on("click", ".has-dropdown > a", function (e) {
71        e.preventDefault();
72        menu.curItem = $(this).parent();
73        _updateActiveMenu(menu);
74      });
75
76      defaults.initElem.on("click", ".nav-toggle", function () {
77        _updateActiveMenu(menu, "back");
78      });
79    }
80
81    // TODO: Make this DRY (deal with waiting for transitionend event)
82    function _updateActiveMenu(menu, direction) {
83      _slideMenu(menu, direction);
84      if (direction === "back") {
85        menu.curItem.removeClass("nav-dropdown-open nav-dropdown-active");
86        menu.curItem = menu.curItem.parent().closest("li");
87        menu.curItem.addClass("nav-dropdown-open nav-dropdown-active");
88        _updateMenuTitle(menu);
89      } else {
90        menu.curItem.addClass("nav-dropdown-open nav-dropdown-active");
91        _updateMenuTitle(menu);
92      }
93    }
94
95    // Update main menu title to be the text of the clicked menu item
96    function _updateMenuTitle(menu) {
97      var title = defaults.menuTitle;
98      if (menu.curLevel > 0) {
99        title = menu.curItem.children("a").text();
100        defaults.initElem.find(".nav-toggle").addClass("back-visible");
101      } else {
102        defaults.initElem.find(".nav-toggle").removeClass("back-visible");
103      }
104      $(".nav-title").text(title);
105    }
106
107    // Slide the main menu based on current menu depth
108    function _slideMenu(menu, direction) {
109      if (direction === "back") {
110        menu.curLevel = menu.curLevel > 0 ? menu.curLevel - 1 : 0;
111      } else {
112        menu.curLevel += 1;
113      }
114      defaults.initElem.children("ul").css({
115        transform: "translateX(-" + menu.curLevel * 100 + "%)",
116      });
117    }
118  };
119}
120
121$(document).on("click", ".js-nav-toggle", function (e) {
122  e.preventDefault();
123  $(".menu").toggleClass("show-menu");
124  $(".nav-wrapper").toggleClass("show-menu");
125  let rt = window.innerWidth;
126  let menuBtnX = $(".js-nav-toggle").offset().left
127  console.log(rt, menuBtnX);
128  $(".js-nav-toggle").css("right", 0)
129  $(".show-menu .js-nav-toggle").css("right", -(rt - menuBtnX - 70))
130});