How would I go about doing that I’m new to coding
const menuItems = {
Home : {
button : '#Home' ,
underline : '#HomeLine' ,
//contentBox: '#HomeBox'
},
Shop : {
button : '#Shop' ,
underline : '#ShopLine' ,
contentBox : '#ShopBox'
},
FAQ : {
button : '#FAQ' ,
underline : '#FAQLine' ,
//contentBox: '#kidsBox'
},
About : {
button : '#About' ,
underline : '#AboutLine' ,
//contentBox: '#kidsBox'
},
$w.onReady( function () {
initMegaMenu()
});
function initMegaMenu () {
for (let i in menuItems) {
$w(menuItems[i].button).onMouseIn(() => {
openRelevantPanel(menuItems[i]);
});
$w(menuItems[i].contentBox).onMouseOut(() => {
openRelevantPanel();
});
}
}
async function openRelevantPanel ( hoverItem ) {
for ( let i in menuItems) {
if (menuItems[i] === hoverItem) {
$w(menuItems[i].underline).show();
await $w(menuItems[i].contentBox).expand();
} else {
$w(menuItems[i].underline).hide();
$w(menuItems[i].contentBox).collapse();
}
}
}