Как исправить ошибки в JS коде?

Question

[Роман Серков]

Скачал горизонтальное меню, немного переделал его все было норм, до того как я вставил его на сайт,все работает когда оно отдельно , а на сайте адаптивка не работает , ховер не работает.
Помогите пожалуйста я новичёк и понятия не имею как исправить ошибку.
меню называется hmenu
JS

(function($) {

  $.fn.menumaker = function(options) {
      
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) { 
            mainmenu.hide().removeClass('open');
          }
          else {
            mainmenu.show().addClass('open');
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });

        cssmenu.find('li ul').parent().addClass('parent');

        multiTg = function() {
          cssmenu.find(".parent").prepend('<span class="submenu-button"></span>');
          cssmenu.find('.submenu-button').on('click', function() {
            $(this).toggleClass('submenu-opened');
            if ($(this).siblings('ul').hasClass('open')) {
              $(this).siblings('ul').removeClass('open').hide();
            }
            else {
              $(this).siblings('ul').addClass('open').show();
            }
          });
        };

        if (settings.format === 'multitoggle') multiTg();
        else cssmenu.addClass('dropdown');

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($( window ).width() > 768) {
            cssmenu.find('ul').show();
          }

          if ($(window).width() <= 768) {
            cssmenu.find('ul').hide().removeClass('open');
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery);

(function($){
$(document).ready(function(){

$(document).ready(function() {
  $("#hmenu").menumaker({
    title: "Menu",
    format: "multitoggle"
  });

  $("#hmenu").prepend("<div id='menu-line'></div>");

var foundActive = false, activeElement, linePosition = 0, menuLine = $("#hmenu #menu-line"), lineWidth, defaultPosition, defaultWidth;

$("#hmenu > ul > li").each(function() {
  if ($(this).hasClass('active')) {
    activeElement = $(this);
    foundActive = true;
  }
});

if (foundActive === false) {
  activeElement = $("#hmenu > ul > li").first();
}

defaultWidth = lineWidth = activeElement.width();

defaultPosition = linePosition = activeElement.position().left;

menuLine.css("width", lineWidth);
menuLine.css("left", linePosition);

$("#hmenu > ul > li").hover(function() {
  activeElement = $(this);
  lineWidth = activeElement.width();
  linePosition = activeElement.position().left;
  menuLine.css("width", lineWidth);
  menuLine.css("left", linePosition);
}, 
function() {
  menuLine.css("left", defaultPosition);
  menuLine.css("width", defaultWidth);
});

});


});
})(jQuery);

вот ошибки

Comments

[Роман Серков]

часть HTML кода с меню

<div id='hmenu'>
						<ul>
							<li><a href='#'>Главнвя</a></li>
							<li><a href='#'>sony vegas pro шаблоны</a></li>
							<li><a href='#'>Блог</a></li>
							<li class='active parent'><a href='#'>Categories</a>
								<ul>
									<li class='parent'><a href='#'>Category 1</a>
										<ul>
											<li><a href='#'>Sub Category 1</a></li>
											<li><a href='#'>Sub Category 2</a></li>
											<li><a href='#'>Sub Category 3</a></li>
											<li><a href='#'>Sub Category 4</a></li>
										</ul>
									</li>
									<li class='parent'><a href='#'>Category 2</a>
										<ul>
											<li><a href='#'>Sub Сategory 1</a></li>
											<li><a href='#'>Sub Сategory 2</a></li>
											<li><a href='#'>Sub Сategory 3</a></li>
											<li><a href='#'>Sub Сategory 4</a></li>
										</ul>
									</li>
									<li class='parent'><a href='#'>Category 3</a>
										<ul>
											<li><a href='#'>Sub Сategory 1</a></li>
											<li><a href='#'>Sub Сategory 2</a></li>
											<li><a href='#'>Sub Сategory 3</a></li>
											<li><a href='#'>Sub Сategory 4</a></li>
										</ul>
									</li>
									<li class='parent'><a href='#'>Category 4</a>
										<ul>
											<li><a href='#'>Sub Сategory 1</a></li>
											<li><a href='#'>Sub Сategory 2</a></li>
											<li><a href='#'>Sub Сategory 3</a></li>
											<li><a href='#'>Sub Сategory 4</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<form method="_POST" name="search" >
								<input type="text" name="search" placeholder="Search"><input type="submit" name="search_button" value="  ">
							</form>
						</div>

[Толстый Лорри]

Вопрос больше похож на ситуацию, в которой кто-то поскупился нанять профессионала и пытается "своими силами".

Переформулируйте вопрос так, чтобы вам можно было подсказать, а не сделать за вас: изучите код, упростите его, насколько это возможно, попробуйте сами, покажите свои попытки и расскажите, что делаете и чего хотите добиться. Сообщество даст вам удочку постарается направить вас в нужном направлении к решению.

Удачи!

[Толстый Лорри]

...и Java с JavaScript имеют мало общего

[Антон Спирин]

От ссылки на ваш сайт и на песочницу с рабочей версией меню было бы гораздо больше пользы.

Answer 1

[Exploding]

На вот забирай свое меню, только не пость больше этот ужас))
Да, только учтите, что как только, часы пробьют ровно 12(PM) - меню превратится...
Короче старинное оно. Антикварное. Из самого палеолита! Его гораздо веселей и "легче" (по ресурсам в смысле) можно, да и нужно на css сделать! А js-ную часть вообще снести. Но если вы любите "классику"...))

Исправлено

(function($) {

  $.fn.menumaker = function(options) {
      
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) { 
            mainmenu.hide().removeClass('open');
          }
          else {
            mainmenu.show().addClass('open');
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });

        cssmenu.find('li ul').parent().addClass('parent');

        multiTg = function() {
          cssmenu.find(".parent").prepend('<span class="submenu-button"></span>');
          cssmenu.find('.submenu-button').on('click', function() {
            $(this).toggleClass('submenu-opened');
            if ($(this).siblings('ul').hasClass('open')) {
              $(this).siblings('ul').removeClass('open').hide();
            }
            else {
              $(this).siblings('ul').addClass('open').show();
            }
          });
        };

        if (settings.format === 'multitoggle') multiTg();
        else cssmenu.addClass('dropdown');

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($( window ).width() > 768) {
            cssmenu.find('ul').show();
          }

          if ($(window).width() <= 768) {
            cssmenu.find('ul').hide().removeClass('open');
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})($);



$(document).ready(function() {
	$("#hmenu").menumaker({
		title: "Menu",
		format: "multitoggle"
	});

	$("#hmenu").prepend("<div id='menu-line'></div>");

	var foundActive = false, activeElement, linePosition = 0, menuLine = $("#hmenu #menu-line"), lineWidth, defaultPosition, defaultWidth;

	$("#hmenu > ul > li").each(function() {
		if ($(this).hasClass('active')) {
			activeElement = $(this);
			foundActive = true;
		}
	});

	if (foundActive === false) {
		activeElement = $("#hmenu > ul > li").first();
	}

	defaultWidth = lineWidth = activeElement.width();

	defaultPosition = linePosition = activeElement.position().left;

	menuLine.css("width", lineWidth);
	menuLine.css("left", linePosition);

	$("#hmenu > ul > li").hover(function() {
		activeElement = $(this);
		lineWidth = activeElement.width();
		linePosition = activeElement.position().left;
		menuLine.css("width", lineWidth);
		menuLine.css("left", linePosition);
	}, 
	function() {
		menuLine.css("left", defaultPosition);
		menuLine.css("width", defaultWidth);
	});

});