http://www.nicolacoe.co.uk/files/theme/jquery.pxuMenu.js?1631129850

1/*===================================================
2=            Weebly Horizontal Site Menu            =
3===================================================*/
4
5(function($) {
6
7  /**
8   *
9   * Generate a flexible responsive menu from the default navigation templates
10   *
11   * Groups overflowing nav items into a "more" menu item
12   *
13   */
14
15  var Menu = function(menu, settings) {
16    this.$menu = $(menu);
17    this.settings = settings;
18    this.$more =  $('\
19      <li class="menu-more has-submenu ' + settings.parentClass + '"> \
20        <a href="#" class="more-link ' + settings.parentLinkClass + '">' + settings.moreLinkHtml + '</a> \
21        <div class="' + settings.containerClass + '" style="display:none"> \
22          <ul class="' + settings.listClass + '" data-menu-more /> \
23        </div> \
24      </li>');
25
26    this.init();
27  };
28
29  /**
30   *
31   * Initialize the menu on load and on resize
32   *
33   */
34
35  Menu.prototype.init = function() {
36    var self = this;
37
38    $('body').addClass("more-nav-on");
39    self.generateMore();
40
41    $(window).on('resize', function() {
42      self.generateMore();
43    });
44  };
45
46  /**
47   *
48   * Update the menu state after init
49   *
50   */
51
52  Menu.prototype.update = function() {
53    this.generateMore();
54    return this.$menu;
55  };
56
57  /**
58   *
59   * Build out the extra menu item with the appended children
60   *
61   */
62
63  Menu.prototype.generateMore = function() {
64    var self = this;
65
66    // Reset to unmodified layout
67    this.destroyMore();
68
69    var $items = this.$menu.children();
70
71    if (!$items.length) return;
72
73
74    // Working in reverse (right to left) loop through menu items to see if they are wrapping to a new line.
75    // If they are, add them to the more menu, otherwise bail out of the loop.
76    $.each($items.get().reverse(), function() {
77      var firstOffsetTop = $($items.get()[0]).offset().top;
78      var $currentItem = $(this);
79
80      if ($currentItem.offset().top > firstOffsetTop || self.$more.offset().top > firstOffsetTop) {
81        self.$menu.append(self.$more);
82
83        self.toggleClasses($currentItem);
84
85        $('[data-menu-more]').prepend($currentItem);
86      } else {
87        return false;
88      }
89    });
90  };
91
92  /**
93   *
94   * Reset the items into the main menu and remove more item
95   *
96   */
97
98  Menu.prototype.destroyMore = function() {
99    var $moreChildren = $('[data-menu-more]').children();
100
101    this.toggleClasses($moreChildren);
102
103    // Move the children back into the main menu
104    $moreChildren.appendTo(this.$menu);
105
106    // Remove the injected wrapper item
107    this.$more.remove();
108  };
109
110  /**
111   *
112   * Set / reset the classes of the menu list items
113   *
114   */
115
116  Menu.prototype.toggleClasses = function($el) {
117    $el
118      .toggleClass(this.settings.parentClass)
119      .toggleClass(this.settings.childClass)
120      .children('a')
121      .toggleClass(this.settings.parentLinkClass)
122      .toggleClass(this.settings.childLinkClass)
123  };
124
125  /**
126   *
127   * Plugin-ify our menu(s)
128   *
129   */
130
131  var pluginName = 'pxuMenu';
132
133  $.fn[pluginName] = function(options) {
134    // Defaults
135    settings = $.extend({
136      parentClass: 'wsite-menu-item-wrap',
137      parentLinkClass: 'wsite-menu-item',
138      containerClass: 'wsite-menu-wrap',
139      listClass: 'wsite-menu',
140      childClass: 'wsite-menu-subitem-wrap',
141      childLinkClass: 'wsite-menu-subitem',
142      moreLinkHtml: 'More',
143    }, options );
144
145    return this.each(function() {
146      if (!$.data(this, pluginName)) {
147        // Store plugin instace with element (this),
148        // so public methods can be called later:
149        // $('menu').data('pxuMenu').update();
150        $.data(this, pluginName, new Menu(this, settings));
151      }
152    });
153  };
154
155}(jQuery));