https://destroyerhistory.org/scripts/mnav.js

1(function($) {
2    var Mnav = {
3        init: function(options, elem) { // Initialize
4            var base = this;
5            base.$elem = $(elem);
6            base.options = $.extend({}, $.fn.Mnav.options, base.$elem.data(), options);
7            base.userOptions = options;
8            base.prepContainer();
9            base.buildWidget();
10        },
11        /** This is where the buttons are added to the nav **/
12        buildWidget: function() {
13            var base = this;
14            var mobileContainer = $('<div/>', {
15                class: "mnav-mobile-btn"
16            });
17            base.$elem.addClass(base.options.theme);
18            base.$elem.prepend(mobileContainer);
19            
20            if(base.options.mobileButtonPos === 'left') {
21                mobileContainer.css({left:0});
22            } else if(base.options.mobileButtonPos === 'right') {
23                mobileContainer.css({right:0});
24            } else if(base.options.mobileButtonPos === 'center') {
25                mobileContainer.css({margin:'auto',position:'relative'});
26                base.$elem.css({padding:'0'});
27            }
28            
29            if(!base.options.subMenuOpen) {
30                base.$elem.children('.mnav-menu').children('.mnav-menu-item').has('ul').prepend('<span class="mnav-open-close"><b class="mnav-mobile-arrow"></b></span>'); 
31            }
32            base.addListeners();
33        },
34        /** Adds listeners to the buttons **/
35        addListeners: function() {
36            var base = this;
37            // Open the main menu
38            base.$elem.children('.mnav-mobile-btn').on('click', function() {
39                base.openMenu();      
40            });
41            // Eww jQuery dropwdown for when we're in desktop view (hover)
42            base.$elem.children('.mnav-menu').on('mouseenter', '.mnav-menu-item', function(e) {
43                if(!base.$elem.children('.mnav-mobile-btn').is(':visible')) {
44                    $(this).children('.mnav-submenu').slideToggle(base.options.subMenuSpeed);
45                }
46            });
47            // Same as abot but when the mouse leaves
48            base.$elem.children('.mnav-menu').on('mouseleave', '.mnav-menu-item', function(e) {
49                if(!base.$elem.children('.mnav-mobile-btn').is(':visible')) {
50                    $(this).children('.mnav-submenu').delay(base.options.delayCloseSpeed).slideToggle(base.options.subMenuSpeed);
51                }          
52            });
53            if(!base.options.subMenuOpen) {
54                // Showing sub menus
55                base.$elem.children('.mnav-menu').on('click', '.mnav-open-close', function() {
56                    $(this).siblings('.mnav-submenu:not(li)').slideToggle(base.options.subMenuSpeed);
57                    $(this).children('.mnav-mobile-arrow').toggleClass('mnav-mobile-arrow-mirror');
58                });
59            }
60            // Show the menu again just in case
61            $(window).resize(function() {
62                if(!base.$elem.children('.mnav-mobile-btn').is(':visible')) {
63                    base.$elem.find('.mnav-submenu').hide();    
64                }
65                if(!base.$elem.children('.mnav-mobile-btn').is(':visible') && !base.$elem.children('.mnav-menu').is(':visible')) {
66                    base.$elem.children('.mnav-menu').show();
67                }
68                if(base.$elem.children('.mnav-mobile-btn').is(':visible') && base.options.subMenuOpen) {
69                    base.$elem.find('.mnav-submenu').show();
70                }
71            });
72        },
73        /** **/
74        prepEvents: function() {
75            var base = this;
76            base.$elem.on('mnav.open', function() {
77                base.openMenu();
78            });
79        },
80        /** This is where the necessary classes are added to the elements in your  nav **/
81        prepContainer: function() {
82            var base = this; 
83            base.$elem.children('ul').addClass('mnav-menu');
84            base.$elem.children('.mnav-menu')
85                .children('li').addClass('mnav-menu-item');
86            base.$elem.children('.mnav-menu')
87                .children('li')
88                    .children('ul').addClass('mnav-submenu');
89            base.$elem.children('.mnav-menu')
90                .children('li').children('ul')
91                    .children('li')
92                        .addClass('mnav-submenu-item');    
93        },
94        openMenu: function() {
95            var base = this;
96            if(base.options.subMenuOpen) {
97                base.$elem.find('.mnav-submenu').show();
98            }
99            base.$elem.children('.mnav-menu:not(li)').slideToggle(base.options.mainMenu

99Speed);            
100        }
101    };
102    $.fn.Mnav = function(options) {
103        return this.each(function() {
104          var mnav = Object.create(Mnav);
105          mnav.init(options, this);
106          $.data(this, 'Mnav', mnav);
107        });
108    };
109    $.fn.Mnav.options = {
110        theme: null,                // Base class to be used
111        
112        mainMenuSpeed: 200,         // How fast will the main menu slide down?
113        subMenuSpeed: 200,          // How fast will the sub menu slide down?
114        delayCloseSpeed: 250,       // How long to wait before the dropdown closes
115        
116        mobileButtonPos: 'center',   // Which side will the button be?
117        
118        subMenuOpen: false,         // Sub Menu open by default?
119    };
120})(jQuery);