v1.4.0 with unique-er automatic submenu IDs

Author: mrwweb

clicky-menus.css

@@ -1,5 +1,5 @@
 /**
- * Clicky Menus v1.3.0
+ * Clicky Menus v1.4.0
  */
 
 /**

clicky-menus.js

@@ -1,11 +1,11 @@
 /**
- * Clicky Menus v1.3.0
+ * Clicky Menus v1.4.0
  */
 
 ( function() {
 	'use strict';
 
-	const ClickyMenus = function( menu ) {
+	const ClickyMenus = function( menu, menuIndex ) {
 		// DOM element(s)
 		const container = menu.parentElement;
 		let currentMenuItem,
@@ -141,11 +141,12 @@
 			const submenuId = submenu.getAttribute( 'id' );
 
 			let id;
+			const idSuffix =  `-submenu-${menuIndex}-${i}`;
 			if ( null === submenuId ) {
-				id = button.textContent.trim().replace( /\s+/g, '-' ).replace(/^[^a-zA-Z]+|[^\w:.-]+/g, "").toLowerCase() + `-submenu-${i}`;
+				id = button.textContent.trim().replace( /\s+/g, '-' ).replace(/^[^a-zA-Z]+|[^\w:.-]+/g, "").toLowerCase() + idSuffix;
 				i++;
 			} else {
-				id = `${submenuId}-submenu-${i}`;
+				id = submenuId + idSuffix;
 				i++;
 			}
 
@@ -162,10 +163,11 @@
 	/* Create a ClickMenus object and initiate menu for any menu with .clicky-menu class */
 	document.addEventListener( 'DOMContentLoaded', function() {
 		const menus = document.querySelectorAll( '.clicky-menu' );
-
+		let i = 1;
 		menus.forEach( ( menu ) => {
-			const clickyMenu = new ClickyMenus( menu );
+			const clickyMenu = new ClickyMenus( menu, i );
 			clickyMenu.init();
+			i++;
 		} );
 	} );
 

readme.md

@@ -1,6 +1,6 @@
 # Clicky Menus
 
-Version 1.3.0
+Version 1.4.0
 
 Jump to: [About](#about), [Features](#features), [Setup & Configuration](#setup--configuration), [Browser Support](#browser-support) [Changelog](#changelog)
 
@@ -157,6 +157,10 @@ Internet Explorer 11 support is possible if you include polyfills for [`closest`
 
 ## Changelog
 
+### 1.4.0 (April 29, 2025)
+
+- Further differentiate automatically-generated submenu IDs by including a unique ID for each clicky-menu.
+
 ### 1.3.0 (April 25, 2025)
 
 - NEW! Use the `data-clicky-menus-close` attribute on any element to automatically close the open submenu. It should be set to the ID of the element with the `clicky-menu` class. Fixes #21.