https://www.kojitusanso.jp/common/js/home/megamenu.js

1/*global $ */
2$(document).ready(function () {
3
4    "use strict";
5
6    $('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
7    //Checks if li has sub (ul) and adds class for toggle icon - just an UI
8
9
10    $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
11    //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)
12
13    $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\" id=\"menuButton\"><span></span></a>");
14
15    //Adds menu-mobile class (for mobile toggle menu) before the normal menu
16    //Mobile menu is hidden if width is more then 959px, but normal menu is displayed
17    //Normal menu is hidden if width is below 959px, and jquery adds mobile menu
18    //Done this way so it can be used with wordpress without any trouble
19
20    $(".menu > ul > li").hover(
21        function (e) {
22            if ($(window).width() > 767) {
23                $(this).children("ul").fadeIn(100);
24                e.preventDefault();
25            }
26        }, function (e) {
27            if ($(window).width() > 767) {
28                $(this).children("ul").fadeOut(100);
29                e.preventDefault();
30            }
31        }
32    );
33    //If width is more than 943px dropdowns are displayed on hover
34
35
36    //the following hides the menu when a click is registered outside
37    $(document).on('click', function(e){
38        if($(e.target).parents('.menu').length === 0)
39            $(".menu > ul").removeClass('show-on-mobile');
40    });
41
42
43    
44    
45    //Temp
46    $(".menu > ul > li > span.icon").click(function() {
47        var thisMenu = $(this).next("ul");
48        var prevState = thisMenu.css('display');
49        $(".menu > ul > li > ul").fadeOut();
50        if ($(window).width() < 767) {
51            if(prevState !== 'block')
52                thisMenu.fadeIn(150);
53        }
54    });
55    
56    
57    
58    
59    $("ul.page_navi li a").click(function() {
60        $("#menuButton").removeClass('active');
61        $(".menu > ul").removeClass('show-on-mobile');
62        $("header").removeClass('active');
63        $(".menu > ul > li > span.icon").removeClass('open');
64    });
65    
66    
67    $(".menu > ul > li > span.icon").click(function(){
68        $(this).toggleClass('open');
69        
70    });
71
72
73    $(".menu-mobile").click(function() {
74        $("#menuButton").toggleClass('active');
75        $(".menu > ul").toggleClass('show-on-mobile');
76        $("header").toggleClass('active');
77        
78    });
79    
80
81
82});