Optimised Scripts

demo/accordion-iframe.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="../dist/styles/jquery-simple-mobilemenu-accordion.css">
     <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet"> 
-    <script src="jquery-3.4.1.min.js"></script>
+    <script src="jquery-3.7.0.min.js"></script>
     <script src="../dist/jquery-simple-mobilemenu.js"></script>
 </head>
 

demo/index.html

@@ -18,9 +18,9 @@ <h1>jQuery SimpleMobilemenu</h1><br class="show-in-mobile">
       <h2>SimpleMobilemenu is a Multi Level Menu, <br />Implemented with jQuery and CSS3.</h2>
       <h3>Features</h3>
       <ul>
-        <li>Multiple level menu support (n-level)</li>
-        <li>Infinite menu level nesting</li>
-        <li>Cross browser compatibility</li>
+        <li>Support for multiple menu levels (n-level)</li>
+        <li>Infinite nesting capability for menu levels</li>
+        <li>Compatibility across various browsers</li>
       </ul>
       <h3 class="menu_Style">Menu Styles</h3>
       <p> <a class="active" href="javascript:void(0)">Slide</a> </p>
@@ -37,4 +37,4 @@ <h3 class="menu_Style">Menu Styles</h3>
   </div>
 </body>
 
-</html>
+</html>

demo/slide-iframe.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="../dist/styles/jquery-simple-mobilemenu-slide.css">
     <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet"> 
-    <script src="jquery-3.4.1.min.js"></script>
+    <script src="jquery-3.7.0.min.js"></script>
     <script src="../dist/jquery-simple-mobilemenu.js"></script>
 </head>
 

dist/jquery-simple-mobilemenu.js

@@ -1,103 +1,114 @@
-/**
- * JQuery Simple MobileMenu
- * Copyright (c) 2017 Position2 Inc.
- * Licensed under MIT (http://opensource.org/licenses/MIT)
- * https://github.com/Position2/jQuery-Simple-MobileMenu
- */
-(function($) {
-  var defaults = {
-    "hamburgerId": "sm_menu_ham", //Hamburger Id
-    "wrapperClass": "sm_menu_outer", //Menu Wrapper Class
-    "submenuClass": "submenu", //Submenu Class
-    "menuStyle": "slide", //Menu Style
-    "onMenuLoad": function() { return true; }, //Calls when menu loaded
-    "onMenuToggle": function() { return true; } //Calls when menu open/close
-  };
-  $.fn.simpleMobileMenu = function(options) {
-    if (this.length === 0) { return this; }
-    var smMenu = {},
-        ds = $(this);
-    var init = function() {
-      smMenu.settings = $.extend({}, defaults, options);
-      smMenu.styleClass = smMenu.settings.menuStyle.toLowerCase() === 'slide' ? "slide" : "accordion";
-      // Create Wrapper div & hamburger
-      createWrapper_Ham();
-      // Create Back Menu for each sub menu
-      createBackButton();
-      // Callback - Menu loaded
-      if (typeof smMenu.settings.onMenuLoad == 'function') {
-        smMenu.settings.onMenuLoad(ds);
-      }
-    },
-    createWrapper_Ham = function() {
-      smMenu.hamburger =  $("<div/>", {
-                            "id": smMenu.settings.hamburgerId,
-                            "html": "<span></span><span></span><span></span><span></span>"
-                          }),
-      smMenu.smmOuter = $("<div/>", { "class": smMenu.settings.wrapperClass+" "+smMenu.styleClass });
-      ds.appendTo(smMenu.smmOuter);
-      smMenu.hamburger.add(smMenu.smmOuter).appendTo($("body"));
-    },
-    createBackButton = function() {
-      smMenu.smmOuter.find("ul." + smMenu.settings.submenuClass).each(function() {
-        var dis = $(this),
-          disPar = dis.closest("li"),
-          disfA = disPar.find("> a"),
-          disBack = $("<li/>", {
-            "class": "back",
-            "html": "<a href='#'>" + disfA.text() + "</a>"
-          })
-        disPar.addClass("hasChild");
-        if(smMenu.settings.menuStyle.toLowerCase() === 'slide') {
-          disBack.prependTo(dis);
-        }
-      });
-    },
-    toggleMobileMenu = function(e) {
-      $("#" + smMenu.settings.hamburgerId).toggleClass("open");
-      $("." + smMenu.settings.wrapperClass).toggleClass("active").find("li.active").removeClass("active");
-      $("body").toggleClass("mmactive");
-      if(smMenu.settings.menuStyle.toLowerCase() === 'accordion') {
-        $("."+smMenu.settings.wrapperClass).find("ul."+smMenu.settings.submenuClass).hide();
-      }
-      // Callback - Menu Toggle
-      if (typeof smMenu.settings.onMenuToggle == 'function') {
-        smMenu.settings.onMenuToggle(ds, $("#" + smMenu.settings.hamburgerId).hasClass("open"));
-      }
-    },
-    showSlideSubMenu = function(e) {
-      $("." + smMenu.settings.wrapperClass).scrollTop(0);
-      $(this).parent().addClass("active").siblings().removeClass("active");
-    },
-    showAccordionSubMenu  = function(e) {
-      e.preventDefault();
-      var dis = $(this),
-          dispar = $(this).parent(),
-          lastActive =  dispar.siblings(".active");
-      dispar.find("> ."+smMenu.settings.submenuClass).slideToggle(function() {
-        if ($(this).is(":visible")) { 
-          var offset = dis[0].offsetTop;
-          $("." + smMenu.settings.wrapperClass).stop().animate({ scrollTop: offset }, 300);
-        }
-      });
-      lastActive.find("ul."+ smMenu.settings.submenuClass).slideUp(function() {
-        $(this).find(".hasChild").removeClass("active");
-      })
-      dispar.toggleClass("active").siblings().removeClass("active");
-    },
-    goBack = function(e) {
-      e.preventDefault();
-      $(this).closest("ul." + smMenu.settings.submenuClass).parent().removeClass("active");
-    }
-    /*Init*/
-    init();
-    /* Open Menu */
-    smMenu.hamburger.click(toggleMobileMenu);
-    /* Show Slide SubMenu */
-    smMenu.smmOuter.filter(".slide").find("li.hasChild > a").click(showSlideSubMenu);
-    /* Show Accordion SubMenu */
-    smMenu.smmOuter.filter(".accordion").find("li.hasChild > a").click(showAccordionSubMenu);
-    /* Go Back */
-    smMenu.smmOuter.find("li.back a").click(goBack);
-  };
-})(jQuery)
+(function ($) {
+	$.fn.simpleMobileMenu = function (options) {
+		const defaults = {
+			hamburgerId: "sm_menu_ham",
+			wrapperClass: "sm_menu_outer",
+			submenuClass: "submenu",
+			menuStyle: "slide",
+			onMenuLoad: () => true,
+			onMenuToggle: () => true,
+		};
+
+		const settings = $.extend({}, defaults, options);
+		const $menu = this;
+		const $hamburger = $("<div/>", {
+			id: settings.hamburgerId,
+			html: "<span></span><span></span><span></span><span></span>",
+		});
+		const $wrapper = $("<div/>", {
+			class: `${settings.wrapperClass} ${settings.menuStyle.toLowerCase()}`,
+		}).append($menu);
+
+		const createBackButton = () => {
+			$wrapper.find(`ul.${settings.submenuClass}`).each(function () {
+				const $submenu = $(this);
+				const $parentLi = $submenu.closest("li");
+				const $firstAnchor = $parentLi.find("> a");
+				const $backLink = $("<li/>", {
+					class: "back",
+					html: `<a href='#'>${$firstAnchor.text()}</a>`,
+				});
+
+				$parentLi.addClass("hasChild");
+				if (settings.menuStyle.toLowerCase() === "slide") {
+					$backLink.prependTo($submenu);
+				}
+			});
+		};
+
+		const toggleMobileMenu = () => {
+			const $hamburger = $("#" + settings.hamburgerId);
+			const $wrapper = $("." + settings.wrapperClass);
+
+			$hamburger.toggleClass("open");
+			$wrapper.toggleClass("active").find("li.active").removeClass("active");
+			$("body").toggleClass("mmactive");
+
+			if (settings.menuStyle.toLowerCase() === "accordion") {
+				$wrapper.find(`ul.${settings.submenuClass}`).hide();
+			}
+
+			settings.onMenuToggle($menu, $hamburger.hasClass("open"));
+		};
+
+		const showSlideSubMenu = function (e) {
+			e.preventDefault();
+			const $parentLi = $(this).parent();
+			$parentLi.addClass("active").siblings().removeClass("active");
+			const $submenu = $parentLi.find(`> .${settings.submenuClass}`);
+			const submenuTop =
+				$submenu.offset().top - $wrapper.offset().top + $wrapper.scrollTop();
+			$wrapper.scrollTop(submenuTop);
+		};
+
+		const showAccordionSubMenu = function (e) {
+			e.preventDefault();
+			const $this = $(this);
+			const $parent = $this.parent();
+			const $lastActive = $parent.siblings(".active");
+
+			$parent.find(`> .${settings.submenuClass}`).slideToggle(() => {
+				if ($(this).is(":visible")) {
+					const offset = $this[0].offsetTop;
+					$wrapper.stop().animate({ scrollTop: offset }, 300);
+				}
+			});
+
+			$lastActive.find(`ul.${settings.submenuClass}`).slideUp(() => {
+				$(this).find(".hasChild").removeClass("active");
+			});
+
+			$parent.toggleClass("active").siblings().removeClass("active");
+		};
+
+		const goBack = function (e) {
+			e.preventDefault();
+			$(this)
+				.closest(`ul.${settings.submenuClass}`)
+				.parent()
+				.removeClass("active");
+		};
+
+		// Initialization
+		$menu.appendTo($wrapper);
+		$hamburger.add($wrapper).appendTo("body");
+		createBackButton();
+
+		// Event listeners using .on('click', function)
+		$hamburger.on("click", toggleMobileMenu);
+		$wrapper
+			.filter(".slide")
+			.find("li.hasChild > a")
+			.on("click", showSlideSubMenu);
+		$wrapper
+			.filter(".accordion")
+			.find("li.hasChild > a")
+			.on("click", showAccordionSubMenu);
+		$wrapper.find("li.back a").on("click", goBack);
+
+		// Callback - Menu loaded
+		settings.onMenuLoad($menu);
+
+		return this;
+	};
+})(jQuery);