I’ve been trying to get a large Menu set up going. I have 7 main SubMenus and I’m working on getting 2 Sub-Sub menus working at the moment. I tried using the tutorial here but I believe that’s meant for a more simple design. I suck at coding in general so any help is appreciated! \
Code and a screenshot of my menu design are attatched.
//-------------Imports-------------//
import wixData from ‘wix-data’ ;
//-------------Global Variables-------------//
//Number of Submenu 2 repeaters.
const subLevel2RepeaterCount = 1 ;
//Object containing all menu data from subTitles database collection.
let menuData;
$w.onReady( async () => {
//Get the menu data from the collection.
menuData = await wixData.query( “Menu” ).find().then(result => result.items);
//Set up each Submenu 2 repeater as it is loaded.
for ( let i = 1 ; i <= subLevel2RepeaterCount; i++) {
$w( ‘#repeater2020Minutes’ ).onItemReady(($item, itemData, index) => {
//Get the repeater button from its ID.
const repeaterButton = $item(#buttonSubLevelTwo7${i})
//Set the item label.
repeaterButton.label = itemData.label;
//Set the item link.
repeaterButton.link = itemData.url;
});
}
});
//Set actions that occur when the main menu button is clicked.
export function buttonMainMenu_click(event) {
$w( “#box2020Minutes” ).hide();
//Get the ID of the clicked main menu button.
const selectedMainMenuId = event.context.itemId;
//Get all the data of the Submenu 1 related to the main menu selection.
const repeaterData = menuData.filter(item => item.menu === selectedMainMenuId);
//Set the data to the Submenu 1 repeater.
$w( ‘#repeaterSubLevelOne7’ ).data = repeaterData;
//Show the repeater of Submenu 1.
$w( ‘#AboutBox’ ).show();
}
//Set an action that occurs when the mouse hovers over a Submenu 1 button.
export function Subbutton7_mouseIn(event) {
//Get the ID of the Submenu 1 button the mouse hovers over.
const selectedRootId = event.context.itemId;
//Get all the data of the Submenu 2 related to Submenu 1.
const repeaterData = menuData.filter(item => item._id === selectedRootId)[ 0 ];
//Set up the box element corresponding to the selected button in Submenu 2.
$w( ‘#repeater2020Minutes’ ).data = repeaterData;
//Show the Submenu 2 box.
$w( ‘#box2020Minutes’ ).show();
}
1
2
3
4
//Set an action that occurs when the mouse pointer is moved away from the Submenu 2 box.
export function box2020Minutes_mouseOut(event) {
$w( ‘#box2020Minutes’ ).hide();
}
//Set up each item in the Submenu 1 repeater as it is loaded.
export function repeaterSubLevelOne7_itemReady($item, itemData, index) {
$item( ‘#Subbutton7’ ).label = itemData.Menu;
}
//-------------Utility Functions for Repeater Setup-------------//
function createUniqueId() {
//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
let id = String(+ new Date() + Math.floor(Math.random() * 1000 ))
return id;
}
function repeater2020Minutes(repeaterData) {
for ( let i = 1 ; i <= subLevel2RepeaterCount; i++) {
//Convert the Submenu 2 string to a Javascript object.
const dataSubSub = JSON.parse(repeaterData[subSubItems${i}]);
//Set a unique ID for each item.
dataSubSub.forEach(subSubItem => {
subSubItem._id = createUniqueId();
})
//Set the Submenu 2 data in the repeater.
$w(#repeater2020Minutes${i}).data = dataSubSub;
}
}