Mega Menu Help

info92911 · December 16, 2020, 6:11pm

I Looking for some guidance in creating a functional Mega Menu for a client. I will preface this with I am new to the Wix Coding, so be gentle
I have been successful in getting the Mega Menu to work from on my test page https://madhabitcreative.wixsite.com/deercamp/test-mega-page , but it does not function on any of the other pages when I mouseIn on the “shop” and “about us” buttons. I have attached the code used as well.
Background: Created the menu/nav with buttons in the header : “testButt1” triggers the mega menu (“testBox1”) on the page. "“testBox1” contains buttons that trigger repeaters with different category products. All the code for both are in “masterPage.js”.
“aboutButton1” is similar, but acts more like a normal dropdown.
Any guidance you can provide is greatly appreciated. Thanks!

CODE-NINJA · December 16, 2020, 6:31pm

Why do you not show your code just right here in a CODE-TAG ?

It’s much more simple and has a much better overview.

//masterPage.js
 
export function testButt1_mouseIn(event,$w) {
    $w('#testBox1').show();
}
 
export function testButt1_mouseOut(event,$w) {
    $w('#testBox1').hide();
}
export function testBox1_mouseIn(event,$w) {
    $w('#testBox1').show();
}
 
export function testBox1_mouseOut(event,$w) {
    $w('#testBox1').hide();
 
}

 
 
export function button16_mouseIn(event) {
    $w("#featureBox1").show();
    $w("#coffeeBox1").hide()
    $w("#groceryBox1").hide()
    $w("#huntBox1").hide()
    $w("#campBox1").hide()
    $w("#merchBox1").hide()
    $w("#gamesBox1").hide()
    $w("#storeBox1").hide()
    $w("#clearBox1").hide()
 
}
 
export function button17_mouseIn(event) {
    $w("#coffeeBox1").show(); 
    $w("#featureBox1").hide()
    $w("#groceryBox1").hide()
    $w("#huntBox1").hide()
    $w("#campBox1").hide()
    $w("#merchBox1").hide()
    $w("#gamesBox1").hide()
    $w("#storeBox1").hide()
    $w("#clearBox1").hide()
 
}
 
export function button22_mouseIn(event) {
    $w("#groceryBox1").show();
    $w("#featureBox1").hide()
    $w("#coffeeBox1").hide()
    $w("#huntBox1").hide()
    $w("#campBox1").hide()
    $w("#merchBox1").hide()
    $w("#gamesBox1").hide()
    $w("#storeBox1").hide()
    $w("#clearBox1").hide()
}
 
export function button23_mouseIn(event) {
    $w("#huntBox1").show();
    $w("#featureBox1").hide()
    $w("#groceryBox1").hide()
    $w("#coffeeBox1").hide()
    $w("#campBox1").hide()
    $w("#merchBox1").hide()
    $w("#gamesBox1").hide()
    $w("#storeBox1").hide()
    $w("#clearBox1").hide() 
}
 
export function button24_mouseIn(event) {
    $w("#campBox1").show(); 
    $w("#featureBox1").hide()
    $w("#groceryBox1").hide()
    $w("#huntBox1").hide()
    $w("#coffeeBox1").hide()
    $w("#merchBox1").hide()
    $w("#gamesBox1").hide()
    $w("#storeBox1").hide()
    $w("#clearBox1").hide() 
}
 
export function button21_mouseIn(event) {
    $w("#merchBox1").show(); 
    $w("#featureBox1").hide()
    $w("#groceryBox1").hide()
    $w("#huntBox1").hide()
    $w("#campBox1").hide()
    $w("#coffeeBox1").hide()
    $w("#gamesBox1").hide()
    $w("#storeBox1").hide()
    $w("#clearBox1").hide() 
}
 
export function button20_mouseIn(event) {
    $w("#gamesBox1").show(); 
    $w("#featureBox1").hide()
    $w("#groceryBox1").hide()
    $w("#huntBox1").hide()
    $w("#campBox1").hide()
    $w("#merchBox1").hide()
    $w("#coffeeBox1").hide()
    $w("#storeBox1").hide()
    $w("#clearBox1").hide() 
}
 
export function button19_mouseIn(event) {
    $w("#storeBox1").show(); 
    $w("#featureBox1").hide()
    $w("#groceryBox1").hide()
    $w("#huntBox1").hide()
    $w("#campBox1").hide()
    $w("#merchBox1").hide()
    $w("#gamesBox1").hide()
    $w("#coffeeBox1").hide()
    $w("#clearBox1").hide()
}
 
export function button18_mouseIn(event) {
    $w("#clearBox1").show();
    $w("#featureBox1").hide()
    $w("#groceryBox1").hide()
    $w("#huntBox1").hide()
    $w("#campBox1").hide()
    $w("#merchBox1").hide()
    $w("#gamesBox1").hide()
    $w("#storeBox1").hide()
    $w("#coffeeBox1").hide() 
}
 
export function aboutBox1_mouseIn(event,$w) {
    $w('#aboutBox1').show(); 
}
export function aboutBox1_mouseOut(event,$w) {
    $w('#aboutBox1').hide(); 
}
export function aboutButton1_mouseIn(event,$w) {
     $w('#aboutBox1').show(); 
}
export function aboutButton1_mouseOut(event,$w) {
     $w('#aboutBox1').hide(); 
}

info92911 · December 16, 2020, 6:54pm

Thanks for the reply, @russian-dima I will make sure I use that code snippet option next time. Unfortunately, both of the links did not help solve my issue.

info92911 · December 16, 2020, 7:11pm

To add…on all pages except for /test-mega-page, I am getting “x” is not a valid selector error. I added comments in the code from the Home Page

// The code in this file will load on every page of your site

$w.onReady(function () {
 // Write your code here
});
//testBox1 is not a valid selector error
export function testButt1_mouseIn(event,$w) {
    $w('#testBox1').show();
}

//testBox1 is not a valid selector error
export function testButt1_mouseOut(event,$w) {
    $w('#testBox1').hide();
}
export function testBox1_mouseIn(event,$w) {
    $w('#testBox1').show();
}
export function testBox1_mouseOut(event,$w) {
    $w('#testBox1').hide();
}


//"ALL" is not a valid selector error
export function button16_mouseIn(event) {
    $w("#featureBox1").show();
    $w("#coffeeBox1").hide()
    $w("#groceryBox1").hide()
    $w("#huntBox1").hide()
    $w("#campBox1").hide()
    $w("#merchBox1").hide()
    $w("#gamesBox1").hide()
    $w("#storeBox1").hide()
    $w("#clearBox1").hide()
 
}

//"ALL" is not a valid selector error
export function button17_mouseIn(event) {
    $w("#coffeeBox1").show(); 
    $w("#featureBox1").hide()
    $w("#groceryBox1").hide()
    $w("#huntBox1").hide()
    $w("#campBox1").hide()
    $w("#merchBox1").hide()
    $w("#gamesBox1").hide()
    $w("#storeBox1").hide()
    $w("#clearBox1").hide()

}

//"ALL" is not a valid selector error
export function button22_mouseIn(event) {
    $w("#groceryBox1").show();
    $w("#featureBox1").hide()
    $w("#coffeeBox1").hide()
    $w("#huntBox1").hide()
    $w("#campBox1").hide()
    $w("#merchBox1").hide()
    $w("#gamesBox1").hide()
    $w("#storeBox1").hide()
    $w("#clearBox1").hide()
}

//"ALL" is not a valid selector error
export function button23_mouseIn(event) {
    $w("#huntBox1").show();
    $w("#featureBox1").hide()
    $w("#groceryBox1").hide()
    $w("#coffeeBox1").hide()
    $w("#campBox1").hide()
    $w("#merchBox1").hide()
    $w("#gamesBox1").hide()
    $w("#storeBox1").hide()
    $w("#clearBox1").hide() 
}

//"ALL" is not a valid selector error
export function button24_mouseIn(event) {
    $w("#campBox1").show(); 
    $w("#featureBox1").hide()
    $w("#groceryBox1").hide()
    $w("#huntBox1").hide()
    $w("#coffeeBox1").hide()
    $w("#merchBox1").hide()
    $w("#gamesBox1").hide()
    $w("#storeBox1").hide()
    $w("#clearBox1").hide() 
}

//"ALL" is not a valid selector error
export function button21_mouseIn(event) {
    $w("#merchBox1").show(); 
    $w("#featureBox1").hide()
    $w("#groceryBox1").hide()
    $w("#huntBox1").hide()
    $w("#campBox1").hide()
    $w("#coffeeBox1").hide()
    $w("#gamesBox1").hide()
    $w("#storeBox1").hide()
    $w("#clearBox1").hide() 
}

//"ALL" is not a valid selector error
export function button20_mouseIn(event) {
    $w("#gamesBox1").show(); 
    $w("#featureBox1").hide()
    $w("#groceryBox1").hide()
    $w("#huntBox1").hide()
    $w("#campBox1").hide()
    $w("#merchBox1").hide()
    $w("#coffeeBox1").hide()
    $w("#storeBox1").hide()
    $w("#clearBox1").hide() 
}

//"ALL" is not a valid selector error
export function button19_mouseIn(event) {
    $w("#storeBox1").show(); 
    $w("#featureBox1").hide()
    $w("#groceryBox1").hide()
    $w("#huntBox1").hide()
    $w("#campBox1").hide()
    $w("#merchBox1").hide()
    $w("#gamesBox1").hide()
    $w("#coffeeBox1").hide()
    $w("#clearBox1").hide()
}

//"ALL" is not a valid selector error
export function button18_mouseIn(event) {
    $w("#clearBox1").show();
    $w("#featureBox1").hide()
    $w("#groceryBox1").hide()
    $w("#huntBox1").hide()
    $w("#campBox1").hide()
    $w("#merchBox1").hide()
    $w("#gamesBox1").hide()
    $w("#storeBox1").hide()
    $w("#coffeeBox1").hide() 
}


export function aboutBox1_mouseIn(event,$w) {
    $w('#aboutBox1').show(); 
}
export function aboutBox1_mouseOut(event,$w) {
    $w('#aboutBox1').hide(); 
}

//aboutBox1 is not a valid selector
export function aboutButton1_mouseIn(event,$w) {
     $w('#aboutBox1').show(); 
}

//aboutBox1 is not a valid selector
export function aboutButton1_mouseOut(event,$w) {
     $w('#aboutBox1').hide(); 
}

CODE-NINJA · December 16, 2020, 7:21pm

// The code in this file will load on every page of your site

This is already your answer!

Your code is placed in your —> “masterPage.js”

But your used elements are on different pages.

Switching to page-1 you have different elements, as when you would switch to page-2, where you will have some other elements.

So it is not a surprise, that you gets errors, because the code on your master-page also acts like a mastercode, for all pages, but can not find the needed elements on every of your pages.

This would be my (quick-brainstorm) conclusion.

info92911 · December 16, 2020, 7:33pm

ok. thanks, I will play around with that…everything I have read, says add the code to the “masterPage.js” so that it shows up on all pages…unless I read that wrong, lol

CODE-NINJA · December 16, 2020, 9:34pm

It is not wrong, when you put your elements, for example into the header-Section.
All elements in the header-sections are shown on all pages.

The same behaviour you will get, when doing the same way in FOOTER (as i know).

Topic		Replies	Views
I need help with a mega menu :) Ask the community code , question	0	476	March 13, 2018
Wix Mega Menu Ask the community code , design , question	3	365	August 25, 2022
Creating a Mega Menu Ask the community code , question	4	357	February 23, 2021
I need some updated mega menu code - Wix changed things and now my code doesn't work! Ask the community code , question	1	88	October 6, 2021
Mega menu - overlapping Ask the community code , question	12	237	January 5, 2022

Mega Menu Help

Related topics