Hi All, A newbie here. Was trying to embed a mega menu strictly on the samples on Velo by Wix website. All is good but having an issue like the expanded menu is not collapsing on its own after mouse out and on load the full menu is open. Just sharing the link here for your reference. It’s an ongoing project would appreciate it if anyone can help to resolve these issues. Also, it seems the header is being expanded as soon as the menu is collapsing which seems odd. Any suggestions on that too. Thanks in an advance link for the site: https://insightdrive.wixsite.com/website-28
import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady(function () {
let allMenusData;
let $item = $w.at();
let containers = $item("Container");
iniPage()
.then((resuts) => {
allMenusData = resuts;
selectMenu(allMenusData, 'subMenuRepeater', 0);
let mainMenuRepeaterData = $w("#mainMenuRepeater").data;
let subMenuRepeaterData = $w("#subMenuRepeater").data;
$w("#mainMenuRepeater").forItems([mainMenuRepeaterData[0]._id], ($item, itemData, index) => {
$item('#mainMenuButton').style.backgroundColor = 'white';
$item('#mainMenuButton').style.color = 'black';
$item('#subMenuButton').style.color = 'black';
});
$w("#subMenuRepeater").forItems([subMenuRepeaterData[0]._id], ($item, itemData, index) => {
$item('#subMenuButton').style.color = '#ED5829';
});
});
containers.forEach(function (container, i, repeatersArray) {
const repeater = container.parent;
const containerChildern = container.children;
const image = containerChildern.filter(element => element.type === '$w.Image')[0];
const button = containerChildern.filter(element => element.type === '$w.Button')[0];
repeater.onItemReady(($item, itemData, index) => {
$item('#' + button.id).label = itemData.name;
if (itemData.image) {
$item('#' + image.id).src = itemData.image;
}
if (itemData.link) {
$item('#' + container.id).onClick((event) => {
wixLocation.to(itemData.link);
});
} else {
$item('#' + button.id).onMouseIn((event) => {
switch (button.id) {
case 'mainMenuButton':
button.style.backgroundColor = 'black';
$item('#' + button.id).style.backgroundColor = 'white';
$item('#' + button.id).style.color = 'black';
break;
case 'subMenuButton':
button.style.color = 'black';
$item('#' + button.id).style.color = '#ED5829';
break;
default:
break;
}
selectMenu(allMenusData, repeater.id, index);
});
}
});
});
});
async function iniPage() {
try {
const allMainMenuData = await wixData.query('mainMenu').limit(1000).find();
$w('#mainMenuRepeater').data = allMainMenuData.items;
$w('#mainMenuStrip').expand();
const allSubMenuData = await wixData.query('subMenu').limit(1000).find();
$w('#subMenuRepeater').data = allSubMenuData.items.filter(item => item.mainMenu === allMainMenuData.items[0]._id);
$w('#subMenuStrip').expand();
const allRangeData = await wixData.query('range').limit(1000).find();
const allNewData = await wixData.query('new').limit(1000).find();
const allProductData = await wixData.query('product').limit(1000).find();
return {
'mainMenuData': allMainMenuData.items,
'subMenuData': allSubMenuData.items,
'rangeData': allRangeData.items,
'newData': allNewData.items,
'productData': allProductData.items
};
} catch (err) {
console.log('error ', err);
}
}
function selectMenu(allMenusData, clickedMenu, clickedButton) {
const allMainMenuData = allMenusData.mainMenuData;
switch (clickedMenu) {
case 'mainMenuRepeater':
$w('#subMenuRepeater').data = allMenusData.subMenuData.filter(item => item.mainMenu === allMainMenuData[clickedButton]._id);
$w('#megaMenuStrip').collapse();
break;
case 'subMenuRepeater':
$w('#rangeRepeater').data = filterd(allMenusData.rangeData);
$w('#newRepeater').data = filterd(allMenusData.newData);
$w('#productRepeater').data = filterd(allMenusData.productData);
$w('#megaMenuStrip').expand();
break;
default:
break;
}
function filterd(data) {
return data.filter(item => item.subMenu === ($w('#subMenuRepeater').data)[clickedButton]._id);
}
}
