https://audionautix.com/assets/js/nexmenu.js

1/*!
2 * jQuery nexMenu v1.0
3 * @Copyright (C) 2018-2019 Nazmul Hussain @ NexGenTeam (https://github.com/nazmulh/nexMenu)
4 *
5 */
6(function($) {
7    "use strict";
8    $.fn.nexmenu = function(options) {
9        var defaults = {
10            nexMenuTarget: jQuery(this),
11            nexMenuContainer: 'body', // Where nexmenu will be placed
12            nexMenuPosition: "", // Fixed or static
13            brandLogo: "Brand", // HTML or String
14            nexBarPosition: "right", // Position of Menu bar | left right
15            brandPosition: "left", // left right
16            nexBarPositionX: "5px", // Disytance of the menu bar in X axis from left or from right
17            nexMenuBg: "", // Menu background
18            nexBarColor: "", // Bar color
19            nexScreenWidth: "480", // Mobile Menu
20            nexShowChildren: true, // true (show children in the menu) or false (to hide them)
21            nexExpandableChildren: true, // true or false.  expand/collapse
22            nexExpand: "+", // single character
23            nexContract: "-", // single character
24            nexRemoveAttrs: false, // true or false
25            onePage: false, // set to true for one page sites
26            nexDisplay: "block", // inline, block, table, table-cell etc
27            removeElements: "" // set to hide page elements
28        };
29        options = $.extend(defaults, options);
30
31        // get browser width
32        var currentWidth = window.innerWidth || document.documentElement.clientWidth;
33
34        return this.each(function() {
35            var nexMenu = options.nexMenuTarget;
36            var nexContainer = options.nexMenuContainer;
37            var nexMenuPosition = options.nexMenuPosition;
38            var nexBarPosition = options.nexBarPosition;
39            var brandPosition = options.brandPosition;
40            var brandLogo = options.brandLogo;
41            var nexBarPositionX = options.nexBarPositionX;
42            var nexMenuBg = options.nexMenuBg;
43            var nexBarColor = options.nexBarColor;
44            var nexScreenWidth = options.nexScreenWidth;
45            var nexRevealClass = ".nexmenu-reveal";
46            var nexShowChildren = options.nexShowChildren;
47            var nexExpandableChildren = options.nexExpandableChildren;
48            var nexExpand = options.nexExpand;
49            var nexContract = options.nexContract;
50            var nexRemoveAttrs = options.nexRemoveAttrs;
51            var onePage = options.onePage;
52            var nexDisplay = options.nexDisplay;
53            var removeElements = options.removeElements;
54
55            //detect known mobile/tablet usage
56            var isMobile = false;
57            if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/Android/i)) || (navigator.userAgent.match(/Blackberry/i)) || (navigator.userAgent.match(/Windows Phone/i))) {
58                isMobile = true;
59            }
60
61            if ((navigator.userAgent.match(/MSIE 8/i)) || (navigator.userAgent.match(/MSIE 7/i))) {
62                // add scrollbar for IE7 & 8 to stop breaking resize function on small content sites
63                jQuery('html').css("overflow-y", "scroll");
64            }
65            
66            var nexRevealPos = "";
67            var brandRevealPos = "";
68            var menuOn = false;
69            var nexMenuExist = false;
70
71            if (nexBarPosition === "right") {
72                nexRevealPos = "right:" + nexBarPositionX + ";left:auto;";
73            }
74            if (nexBarPosition === "left") {
75                nexRevealPos = "left:" + nexBarPositionX + ";right:auto;";
76            }
77            if (brandPosition === "left") {
78                brandRevealPos = "left:" + nexBarPositionX + ";right:auto;";
79                // brandRevealPos = "text-align:left;";
80            }
81            if (brandPosition === "right") {
82                brandRevealPos = "right:" + nexBarPositionX + ";left:auto;";
83                // brandRevealPos = "text-align:right;";
84            }
85
86
87
88            // set all styles for nex-reveal

89            var $navreveal = "";
90
91            // re-instate original nav (and call this on window.width functions)
92            var nexOriginal = function() {
93                jQuery('.nex-bar,.nex-push').remove();
94                jQuery(nexContainer).removeClass("nex-container");
95                jQuery(nexMenu).css('display', nexDisplay);
96                menuOn = false;
97                nexMenuExist = false;
98                jQuery(removeElements).removeClass('nex-remove');
99            };
100
101            // navigation reveal
102            var shownexMenu = function() {
103                
104                var nexStyles = "background:" + nexMenuBg+";position:"+nexMenuPosition+";top:0;left:0";
105                var nexBarStyles = "background:" + nexBarColor;
106                var nexMenuOpen = '<span  style="'+nexBarStyles+'" ></span><span  style="'+nexBarStyles+'" ></span><span  style="'+nexBarStyles+'" ></span>';
107                if (currentWidth <= nexScreenWidth) {
108                    jQuery(removeElements).addClass('nex-remove');
109                    nexMenuExist = true;
110                    // add class to body so we don't need to worry about media queries here, all CSS is wrapped in '.nex-container'
111                    jQuery(nexContainer).addClass("nex-container");
112                       jQuery('.nex-container').prepend('<div class="nex-bar"  style="'+nexStyles+'"><a href="#nav" class="nexmenu-reveal" style="'+nexRevealPos+'">Show Navigation</a><div class="brand-bar" style="display:block; position:absolute;'+brandRevealPos+'">'+brandLogo+'</div><nav class="nex-nav"></nav></div>');
113                       // jQuery('#brand').replaceWith('<div class="brand-bar" style="display:block;'+brandRevealPos+'">'+brandLogo+'</div>');
114
115                    //push nexMenu navigation into .nex-nav
116                    var nexMenuContents = jQuery(nexMenu).html();
117                    jQuery('.nex-nav').html(nexMenuContents);
118
119                    // remove all classes from EVERYTHING inside nexmenu nav
120                    if (nexRemoveAttrs) {
121                        jQuery('nav.nex-nav ul, nav.nex-nav ul *').each(function() {
122                            // First check if this has nex-remove class
123                            if (jQuery(this).is('.nex-remove')) {
124                                jQuery(this).attr('class', 'nex-remove');
125                            } else {
126                                jQuery(this).removeAttr("class");
127                            }
128                            jQuery(this).removeAttr("id");
129                        });
130                    }
131                    // hide current navigation and reveal nex nav link
132                    jQuery(nexMenu).hide();
133                    jQuery(".nexmenu-reveal").show();
134
135                     var nexInner = function() {
136                                // get last class name
137                                if (jQuery($navreveal).is(".nexmenu-reveal.nexclose")) {
138                                        // $navreveal.html(nexMenuClose);
139                                } else {
140                                        $navreveal.html(nexMenuOpen);
141                                }
142                        };
143                    // turn 'X' on or off
144                    jQuery(nexRevealClass).html(nexMenuOpen);
145                    $navreveal = jQuery(nexRevealClass);
146
147                    //hide nex-nav ul
148                    jQuery('.nex-nav ul').hide();
149
150                    // hide sub nav
151                    if (nexShowChildren) {
152                        // allow expandable sub nav(s)
153                        if (nexExpandableChildren) {
154                            jQuery('.nex-nav ul ul').each(function() {
155                                if (jQuery(this).children().length) {
156                                    jQuery(this, 'li:first').parent().append('<a class="nex-expand" href="#">' + nexExpand + '</a>');
157                                }
158                            });
159                            jQuery('.nex-expand').on("click", function(e) {
160                                e.preventDefault();
161                                if (jQuery(this).hasClass("nex-clicked")) {
162                                    jQuery(this).text(nexExpand);
163                                    jQuery(this).prev('ul').slideUp(300, function() {});
164                                } else {
165                                    jQuery(this).text(nexContract);
166                                    jQuery(this).prev('ul').slideDown(300, function() {});
167                                }
168                                jQuery(this).toggleClass("nex-clicked");
169                            });
170
171                        } else {
172                            jQuery('.nex-nav ul ul').show();
173                        }
174                    } else {
175                        jQuery('.nex-nav ul ul').hide();
176                    }
177
178                    // add last class to tidy up borders
179                    jQuery('.nex-nav ul li').last().addClass('nex-last');
180                    $navreveal.removeClass("nexclose");
181                    jQuery($navreveal).click(function(e) {
182                        e.preventDefault();
183                        if (menuOn === false) {
184                            jQuery('.nex-nav ul:first').slideDown();
185                            menuOn = true;
186                        } else {
187                            jQuery('.nex-nav ul:first').slideUp();
188                            menuOn = false;

189                        }
190                        $navreveal.toggleClass("nexclose");
191                        nexInner();
192                        jQuery(removeElements).addClass('nex-remove');
193                    });
194
195                    // for one page websites, reset all variables...
196                    if (onePage) {
197                        jQuery('.nex-nav ul > li > a:first-child').on("click", function() {
198                            jQuery('.nex-nav ul:first').slideUp();
199                            menuOn = false;
200                            jQuery($navreveal).toggleClass("nexclose").html(nexMenuOpen);
201                        });
202                    }
203                } else {
204                    nexOriginal();
205                }
206            };
207
208            if (!isMobile) {
209                // reset menu on resize above nexScreenWidth
210                jQuery(window).resize(function() {
211                    currentWidth = window.innerWidth || document.documentElement.clientWidth;
212                    if (currentWidth > nexScreenWidth) {
213                        nexOriginal();
214                    } else {
215                        nexOriginal();
216                    }
217                    if (currentWidth <= nexScreenWidth) {
218                        shownexMenu();
219                    } else {
220                        nexOriginal();
221                    }
222                });
223            }
224
225            jQuery(window).resize(function() {
226                // get browser width
227                currentWidth = window.innerWidth || document.documentElement.clientWidth;
228
229                if (!isMobile) {
230                    nexOriginal();
231                    if (currentWidth <= nexScreenWidth) {
232                        shownexMenu();
233                    }
234                } else {
235                    if (currentWidth <= nexScreenWidth) {
236                        if (nexMenuExist === false) {
237                            shownexMenu();
238                        }
239                    } else {
240                        nexOriginal();
241                    }
242                }
243            });
244
245            // run main menuMenu function on load
246            shownexMenu();
247        });
248    };
249})(jQuery);