https://www.jcaldwellcustompools.com/site/wp-content/plugins/nw_mobile_menu/scripts/mobile-menu.js?ver=6.8.2

1jQuery(document).ready(function($) {
2    /**
3     * Title: Mobile Menu
4     * Description: Adds a mobile menu to the first web marketing sites
5     * Author: First Web Marketing
6     *
7     * 1. MARKUP
8     * 2. MOBILE MENU CONTROLS
9     *
10     */
11
12    /* 1. MARKUP - Generates the mobile menu markup based on existing wp markup
13       ========================================================================== */
14
15    // This copies the current main menu and creates a new menu for the mobile menu
16    let menuClone = $('.menu-main-container').html().replace(/id="menu-main"/, 'id="menu-mobile"');
17    menuClone = '<div class="menu-mobile-container">' + menuClone + '</div>';
18
19    // If the #page element doesn't exists, 
20    // wrap it over the content
21    if ( !$('#page').length ) {
22        $('body').wrapInner('<div id="page"></div>');
23    }
24
25    $('#page').before(menuClone);
26
27    // Adds buttons to the mobile menu to close the menu
28    $(".menu-mobile-container").prepend('<a id="simple-menu-close-button"><i class="fa fa-times" aria-hidden="true"></i></a>');
29
30    // Adds the sub menu expand buttons
31    $('.menu-mobile-container .menu-item-has-children').prepend('<a class="simple-menu-expand-button"><i class="fa fa-angle-right" aria-hidden="true"></i></a>');
32
33    // Ensures the the viewport is using the proper scaling
34    let metaViewportContent = $('meta[name="viewport"]').attr('content');
35    if (!metaViewportContent.match(/initial-scale=1/ig)) {
36        $('meta[name="viewport"]').attr('content', metaViewportContent + ', initial-scale=1')
37    }
38
39    // Setup for keeping the overlay the same height as the window 
40    function setOverlayHeight() {
41        let mobileMenuHeight = $('.menu-mobile-container').height();
42        $('#fwm-overlay').css('height', mobileMenuHeight + 'px');
43    }
44
45    // Fix to prevent mobile menu from adding x scrolling on mobile
46    $('body,html').css({'overflow-x': 'hidden'});
47
48
49    /* 2. MOBILE MENU CONTROLS
50       ========================================================================== */
51
52    // Hides sub menus so they are only expanded by buttons
53    $('#menu-mobile .sub-menu').hide();
54
55    // Sets the mobile menu to hidden by default
56    $('.menu-mobile-container').addClass('menu-mobile-hidden');
57
58    // Sets the page displacement closed by default
59    $("#page").addClass('page-mobile-close');
60
61    function openMobileMenu() {
62        $('.menu-mobile-container').addClass('menu-mobile-open');
63        $('.menu-mobile-container').removeClass('menu-mobile-hidden');
64
65        $("#page").before('<div id="fwm-overlay"></div>');
66        setOverlayHeight();
67
68        $("#page").removeClass('page-mobile-close');
69        $("#page").addClass('page-mobile-open');
70    }
71
72    function closeMobileMenu() {
73        $('.menu-mobile-container').addClass('menu-mobile-hidden');
74        $('.menu-mobile-container').removeClass('menu-mobile-open');
75
76        $("#fwm-overlay").remove();
77
78        $("#page").addClass('page-mobile-close');
79        $("#page").removeClass('page-mobile-open');
80    }
81
82    // Opens the mobile menu when the hamburger is clicked
83    $(document).on('click touchend', '.mobile-menu-btn', function(event) {
84        event.stopPropagation();
85        event.preventDefault();
86         openMobileMenu();
87    });
88
89    // Expands sub menus
90    $(document).on('click touchend', '.simple-menu-expand-button', function(event) {
91        event.stopPropagation();
92        event.preventDefault();
93        
94        $(this).find('.fa').toggleClass('fa-angle-right');
95        $(this).find('.fa').toggleClass('fa-angle-down');
96
97        $(this).parent().find(".sub-menu").slideToggle('fast', 'swing', function() {
98            setOverlayHeight();
99        });
100
101    });
102
103    // Closes the mobile menu when the close button is clicked
104    $(document).on('click touchend', '#simple-menu-close-button', function(event) {
105        event.stopPropagation();
106        event.preventDefault();
107        closeMobileMenu();
108    });
109
110    // Closes the mobile menu when the page is licked
111    $(document).on('click touchend', '#fwm-overlay', function(event) {
112        event.stopPropagation();
113        event.preventDefault();
114        closeMobileMenu();
115    });
116});