How can I read the value of a menu item within a sub menu and make an action as the item is clicked?

[DJ_Lord]

Question:
How can I read the value of a menu item within a sub menu and make an action as the item is clicked?

Product:
Wix Editor & Code

What are you trying to achieve:
I am new to code, so I may be wrong on my approach. I am trying to create a variable that has the label of the menu item, and upon click of that item (it doesn’t have to be a variable, I’m just not sure the proper approach) it will do other actions. I am trying to use the “.menuItem” feature, though it does not take “.onItemClick” or “.onClick” afterwards. Is there a different approach or a solution that I am missing?

What have you already tried:
Online Forums / Documents

Additional information:
Ultimately, I am trying to make it so as someone clicks on one item on the menu, it takes them to a specific slide (on a slideshow) on another page. I am not trying to create a custom menu, as I already have a menu setup through Wix and I like the current style. Currently, the menu item goes to the section that has the slideshow, but DOES NOT actually display the specific Slide I am wanting.

[CODE-NINJA]

How do look like your menu ?

[DJ_Lord]

It’s just the typical menu (attached image)

–blacked out parts just for privacy and no this is not final, was messing with menus & code

[CODE-NINJA]

So you are using the wix-horizontal-menu?

How to read subMenu ???

1. get all menu-data…
   let menuItems = $w('#myMenu').menuItems;

2. using a → console.log(…)

console.log(menuItems);

You will get something like…

/* Sample array of menu items: 
 *
 * [
 *   {
 *     "link": "https://myairlines.com",
 *     "target": "_self",
 *     "label": "Home",
 *     "selected": true,
 *     "menuItems": []
 *   },
 *   {
 *     "link": "https://myairlines.com/reservations",
 *     "target": "_self",
 *     "label": "Book a Flight",
 *     "selected": false,
 *     "menuItems": []
 *   },
 *   {
 *     "link": "https://myairlines.com/frequentflier",
 *     "target": "_self",
 *     "label": "Mileage Program",
 *     "selected": false,
 *     "menuItems": [
 *       {
 *         "link": "https://myairlines.com//frequentflier/join",
 *         "target": "_self",
 *         "label": "Join",
 *         "selected": false,
 *         "menuItems": []
 *       },
 *       {
 *         "link": "https://myairlines.com/frequentflier/check",
 *         "target": "_self",
 *         "label": "Check Miles",
 *         "selected": false,
 *         "menuItems": []
 *       }
 *     ]
 *   }
 * ]
 */

Each of menu includes a sub-menu…

3. Now you should be able to grab this specific menu and manipulate it or add new items (sub-items) to it.

This one for example will add a new menu-item…

let menuItems = $w('#myMenu').menuItems;

menuItems.push({label: 'My New Label', link: '/mynewlink', id: 'my-new-id'});

$w('#myMenu').menuItems = menuItems;

4. This one should generate an including sub-menu…

menuItems.push(
    {
        label: 'My New Label', 
        link: '/mynewlink', 
        id: 'my-new-id',
        menuItems: [
        {
          "link": "https://myairlines.com//frequentflier/join",
          "target": "_self",
          "label": "Join",
          "selected": false,
          "menuItems": []
        },
        {
          "link": "https://myairlines.com/frequentflier/check",
          "target": "_self",
          "label": "Check Miles",
          "selected": false,
          "menuItems": []
        }
      ]
    }
);

[DJ_Lord]

Hey:

I am using horizontal menu, yes. I’m not trying to ADD anything to my menu. I am wanting to make it so when one of the buttons (which is part of a submenu) is clicked, it goes to a spacific page and opens a certain slide.

I cannot seem to get it to work to make it where onClick of the menu item as I cannot use onClick or onItemClick with menuItem.

[CODE-NINJA]

$w('#myMenu').onItemClick((event)=> {console.log(event.target.id);
   let label = event.item.label;  console.log('Label: ', label);
   let link = event.item.link;  console.log('Link: ', link);
});

[DJ_Lord]

Hello,

I’ll try this here soon. I should be able to make an “IF” statement saying that if label == “value” then it’ll do an action, correct?

Thanks!

[CODE-NINJA]

Correct.

1. you click a menu-item
2. you get the menu-data
3. you create an if-else-condition
4. you start a function → regarding the result of → IF-ELSE-CONDITION

if(label === 'xyz') {console.log('do something')}
else {console.log('do something else');}

[DJ_Lord]

@CODE-NINJA

if(label === 'xyz') {console.log('do something')}
else {console.log('do something else');}

What would I add to all of this to allow for items in a dropdown (About Us → Xyz Page)? For the “label” variable?

[DJ_Lord]

Hey, I tried a bunch of different methods and I still can’t seem to get it to work. I want to use the already-existing submenu options.

[CODE-NINJA]

@CODE-NINJA

$w('#myMenu').onItemClick((event)=> {console.log(event.target.id);
   let label = event.item.label;  console.log('Label: ', label);
   let link = event.item.link;  console.log('Link: ', link);
});

An example for you…
https://russian-dima.wixstudio.io/my-site-7

Running code…

$w.onReady(function() {
	let menuItems = $w('#horizontalMenu1').menuItems; console.log('Menu: ', menuItems);

	$w('#horizontalMenu1').onItemClick((event)=> {console.log('Clicked-ID: ', event.target.id);
   		let label = event.item.label;  console.log('Label: ', label);
		let link = event.item.link;  console.log('Link: ', link);

		if(label === 'Sub-Menu-1') {console.log('You clicked Sub-Menu-1');}
		else if(label === 'Sub-Menu-2') {console.log('You clicked Sub-Menu-2');}
		else if(label === 'Sub-Menu-3') {console.log('You clicked Sub-Menu-3');}
		else if(label === 'Sub-Menu-4') {console.log('You clicked Sub-Menu-4');}
	});
});

You will find a simple HORIZONTAL-MENU, with 3 Main-Menu-Items and 4 Sub-Menu-Items…

Take a look onto the LOGS…

… when clicking onto one of the → SUBMENUS <—.

Why it always is known, which Sub-Menu-Item was clicked???

Expand the functionality of this example and you’ll get what you want.

Full Menu-Object-Tree…