https://www.terminalecinema.com/js/menumaker.js

1(function($) {
2
3  $.fn.menumaker = function(options) {
4      
5      var cssmenu = $(this), settings = $.extend({
6        title: "Menu",
7        format: "dropdown",
8        breakpoint: 768,
9        sticky: false
10      }, options);
11
12      return this.each(function() {
13        cssmenu.find('li ul').parent().addClass('has-sub');
14        if (settings.format != 'select') {
15          cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
16          $(this).find("#menu-button").on('click', function(){
17            $(this).toggleClass('menu-opened');
18            var mainmenu = $(this).next('ul');
19            if (mainmenu.hasClass('open')) { 
20              mainmenu.hide().removeClass('open');
21            }
22            else {
23              mainmenu.show().addClass('open');
24              if (settings.format === "dropdown") {
25                mainmenu.find('ul').show();
26              }
27            }
28          });
29
30          multiTg = function() {
31            cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
32            cssmenu.find('.submenu-button').on('click', function() {
33              $(this).toggleClass('submenu-opened');
34              if ($(this).siblings('ul').hasClass('open')) {
35                $(this).siblings('ul').removeClass('open').hide();
36              }
37              else {
38                $(this).siblings('ul').addClass('open').show();
39              }
40            });
41          };
42
43          if (settings.format === 'multitoggle') multiTg();
44          else cssmenu.addClass('dropdown');
45        }
46
47        else if (settings.format === 'select')
48        {
49          cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
50          var selectList = cssmenu.find('select');
51          selectList.append('<option>' + settings.title + '</option>', {
52                                                         "selected": "selected",
53                                                         "value": ""});
54          cssmenu.find('a').each(function() {
55            var element = $(this), indentation = "";
56            for (i = 1; i < element.parents('ul').length; i++)
57            {
58              indentation += '-';
59            }
60            selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
61          });
62          selectList.on('change', function() {
63            window.location = $(this).find("option:selected").val();
64          });
65        }
66
67        if (settings.sticky === true) cssmenu.css('position', 'fixed');
68
69        resizeFix = function() {
70          if ($(window).width() > settings.breakpoint) {
71            cssmenu.find('ul').show();
72            cssmenu.removeClass('small-screen');
73            if (settings.format === 'select') {
74              cssmenu.find('select').hide();
75            }
76            else {
77              cssmenu.find("#menu-button").removeClass("menu-opened");
78            }
79          }
80
81          if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
82            cssmenu.find('ul').hide().removeClass('open');
83            cssmenu.addClass('small-screen');
84            if (settings.format === 'select') {
85              cssmenu.find('select').show();
86            }
87          }
88        };
89        resizeFix();
90        return $(window).on('resize', resizeFix);
91
92      });
93  };
94})(jQuery);