Velo Tutorial: Creating an Expanding Mega Menu

1//-------------Imports-------------//
2import wixData from 'wix-data';
3
4//-------------Global Variables-------------//
5
6//Number of Submenu 2 repeaters.
7const subLevel2RepeaterCount = 2;
8
9//Object containing all menu data from subTitles database collection.
10let menuData;

1$w.onReady(async () => {
2  //Get the menu data from the collection.
3  menuData = await wixData.query("subTitles").find().then(result => result.items);
4
5  //Set up each Submenu 2 repeater as it is loaded.
6  for (let i = 1; i <= subLevel2RepeaterCount; i++) {
7    $w(`#repeaterSubSub${i}`).onItemReady(($item, itemData, index) => {
8      //Get the repeater button from its ID.
9      const repeaterButton = $item(`#buttonSubLevelTwo${i}`)
10      //Set the item label.
11      repeaterButton.label = itemData.label;
12      //Set the item link.
13      repeaterButton.link = itemData.url;
14    });
15  }
16});

1//Set actions that occur when the main menu button is clicked.
2export function buttonMainMenu_click(event) {
3    $w("#title").show();
4    $w("#title").text = event.target.label
5 $w("#boxSubSubMenu").hide();
6 //Get the ID of the clicked main menu button.
7 const selectedMainMenuId = event.context.itemId;
8 //Get all the data of the Submenu 1 related to the main menu selection.
9 const repeaterData = menuData.filter(item => item.menu === selectedMainMenuId);
10 //Set the data to the Submenu 1 repeater.
11 $w('#repeaterSubLevelOne').data = repeaterData;
12 //Show the repeater of Submenu 1.
13 $w('#repeaterSubLevelOne').show();
14}

1//Set an action that occurs when the mouse hovers over a Submenu 1 button.
2export function buttonSub_mouseIn(event) {
3 //Get the ID of the Submenu 1 button the mouse hovers over.
4 const selectedRootId = event.context.itemId;
5 //Get all the data of the Submenu 2 related to Submenu 1.
6 const repeaterData = menuData.filter(item => item._id === selectedRootId)[0];
7 //Set up the box element corresponding to the selected button in Submenu 2.
8 setSubSubMenu(repeaterData); 
9 //Show the Submenu 2 box.
10 $w('#boxSubSubMenu').show();
11    }

1//Set an action that occurs when the mouse pointer is moved away from the Submenu 2 box.
2export function boxSubSubMenu_mouseOut(event) {
3 $w('#boxSubSubMenu').hide();
4}

1//Set up each item in the Submenu 1 repeater as it is loaded.
2export function repeaterSubLevelOne_itemReady($item, itemData, index) {
3 $item('#buttonSub').label = itemData.subTitles;
4}

1//-------------Utility Functions for Repeater Setup-------------//
2
3function createUniqueId() {
4 //Creating a Unique Id for each of the menu sub-items by getting the current millisecond and adding a random number from 1 to 1000
5 let id = String(+new Date() + Math.floor(Math.random() * 1000))
6 return id;
7}

1function setSubSubMenu(repeaterData) {
2 //Set the image of the Submenu 1
3 $w('#image1').src = repeaterData.img1;
4 for (let i = 1; i <= subLevel2RepeaterCount; i++) {
5  //Convert the Submenu 2 string to a Javascript object.
6  const dataSubSub = JSON.parse(repeaterData[`subSubItems${i}`]);
7  //Set a unique ID for each item.
8  dataSubSub.forEach(subSubItem => {
9   subSubItem._id = createUniqueId();
10  })
11  //Set the Submenu 2 data in the repeater.
12  $w(`#repeaterSubSub${i}`).data = dataSubSub;
13 }
14}