Hello! I found a bit of code to create a Mega Menu for a client and I have it working, but there are a few glitches that I can’t get straightened out. I am fairly new to coding (please bear with me, I’m trying to learn :), so I need some guidance. I’ve looked over the help sections and other places but I still can’t figure it out. I feel like a big dummy!
What is happening is, when I hover over the container box/text and my menu expands, when I mouse over the expanded sub-menu, links the entire menu will disappear. But if I go back up to the main menu link it will then reappear and work correctly. It’s hard to explain so here is the link to the page see what I mean: https://val467.wixsite.com/my-site .
I have added my code below. As I said, I am new to coding so don’t laugh. I’m trying! Thanks in advance for anyone’s help.
function toggleFold(index) {
let $fold = $w('#fold' + index);
let $headerBox = $w('#headerBox' + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
$headerBox.show();
}
else {
$fold.collapse();
$headerBox.show();
}
// collapse the other folds
[1,2,3,4,5,6]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#fold' + idx).collapse();
$w('#headerBox' + idx).hide();
$w('#headerBox' + idx).show();
})
}
export function headerBox1_onmouseIn(event) {
toggleFold(1);
}
export function headerBox2_onmouseIn(event) {
toggleFold(2);
}
export function headerBox3_onmouseIn(event) {
toggleFold(3);
}
export function headerBox4_onmouseIn(event) {
toggleFold(4);
}
export function headerBox5_onmouseIn(event) {
toggleFold(5);
}
export function headerBox6_onmouseIn(event) {
toggleFold(6);
}
export function headerBox1_onmouseOut(event) {
toggleFold(1);
}
export function fold1_onmouseIn(event) {
toggleFold(1);
}
export function fold1_onmouseOut(event) {
toggleFold(1);
}
export function headerBox2_onmouseOut(event) {
toggleFold(2);
}
export function fold2_onmouseIn(event) {
toggleFold(2);
}
export function fold2_onmouseOut(event) {
toggleFold(2);
}
export function headerBox3_onmouseOut(event) {
toggleFold(3);
}
export function fold3_onmouseIn(event) {
toggleFold(3);
}
export function fold3_onmouseOut(event) {
toggleFold(3);
}
export function headerBox4_onmouseOut(event) {
toggleFold(4);
}
export function fold4_onmouseIn(event) {
toggleFold(4);
}
export function fold4_onmouseOut(event) {
toggleFold(4);
}
export function headerBox5_onmouseOut(event) {
toggleFold(5);
}
export function fold5_onmouseIn(event) {
toggleFold(5);
}
export function fold5_onmouseOut(event) {
toggleFold(5);
}
export function headerBox6_onmouseOut(event) {
toggleFold(6);
}
export function fold6_onmouseIn(event) {
toggleFold(6);
}
export function fold6_onmouseOut(event) {
toggleFold(6);
}
Are you 100% sure that you actually want to be using that code for a MEGA MENU?
That code you are using is a mashed up version of collapsing elements automatically when you expand another one.
https://www.wix.com/corvid/example/collapse-elements
function toggleFold(index) {
let $fold = $w('#fold' + index);
let $arrowDown = $w('#arrowDown' + index);
let $arrowRight = $w('#arrowRight' + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowRight.hide();
}
else {
$fold.collapse();
$arrowDown.hide();
$arrowRight.show();
}
// collapse the other folds
[1,2,3,4]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#fold' + idx).collapse();
$w('#arrowDown' + idx).hide();
$w('#arrowRight' + idx).show();
})
}
export function headerBox1_onClick(event) {
toggleFold(1);
}
export function headerBox2_onClick(event) {
toggleFold(2);
}
export function headerBox3_onClick(event) {
toggleFold(3);
}
export function headerBox4_onClick(event) {
toggleFold(4);
}
Whereas this is an example for a MEGA MENU.
https://www.wix.com/corvid/example/mega-menu
//-------------Imports-------------//
import wixData from 'wix-data';
//-------------Global Variables-------------//
//Number of Submenu Level 2 repeaters.
const subLevel2RepeaterCount = 2;
//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("subTitles").find().then(result => result.items);
//Set up each Submenu Level 2 repeater as it is loaded.
for (let i = 1; i <= subLevel2RepeaterCount; i++) {
$w(`#repeaterSubSub${i}`).onItemReady(($item, itemData, index) => {
//Get the repeater button from its ID.
const repeaterButton = $item(`#buttonSubLevelTwo${i}`)
//Set the item label.
repeaterButton.label = itemData.label;
//Set the item link.
repeaterButton.link = itemData.url;
});
}
});
//Set an action that occurs when the main menu button is clicked.
export function buttonMainMenu_click(event) {
$w("#title").show();
$w("#title").text = event.target.label
$w("#boxSubSubMenu").hide();
//Get the ID of the clicked main menu button.
const selectedMainMenuId = event.context.itemId;
//Get all the data of the Submenu Level 1 related to the main menu selection.
const repeaterData = menuData.filter(item => item.menu === selectedMainMenuId);
//Set the data to the Submenu level 1 repeater.
$w('#repeaterSubLevelOne').data = repeaterData;
//Show the repeater of Submenu level 1.
$w('#repeaterSubLevelOne').show();
}
//Set an action that occurs when mouse hovers over the sub menu button.
export function buttonSub_mouseIn(event) {
//Get the ID of the Submenu Level 1 button the mouse hovers on.
const selectedRootId = event.context.itemId;
//Get all the data of the Submenu Level 2 related to the Submenu level 1.
const repeaterData = menuData.filter(item => item._id === selectedRootId)[0];
//Set up the box element corresponding to the selected button in Submenu Level 2.
setSubSubMenu(repeaterData);
//Show the Submenu Level 2 box.
$w('#boxSubSubMenu').show();
}
//Set an action that occurs when the mouse pointer is moved away from the Submenu Level 2 box.
export function boxSubSubMenu_mouseOut(event) {
$w('#boxSubSubMenu').hide();
}
//Set up each item in the Submenu Level 1 repeater as it is loaded.
export function repeaterSubLevelOne_itemReady($item, itemData, index) {
$item('#buttonSub').label = itemData.subTitles;
}
//-------------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 setSubSubMenu(repeaterData) {
//Set the image of the Submenu Level 1
$w('#image1').src = repeaterData.img1;
for (let i = 1; i <= subLevel2RepeaterCount; i++) {
//Convert the Submenu Level 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 Level 2 data in the repeater.
$w(`#repeaterSubSub${i}`).data = dataSubSub;
}
}
Thank you GOS! No, I’m not 100% sure on using that code. It just seemed like it was more simple than the 2nd code shown (I’ve looked at several). I’ll try the 2nd one and see if I can get it to work without making a mess of it. Although I’d love to learn how to do it, I may just need to hire someone to make one for me.
Thanks for your help!
GOS: On another note, can a Mega Menu be created using one of Wix’s regular menus instead of using repeaters? I tried using a repeater, but some of the menu items are twice as long as others and I couldn’t get it to look right.
