Need Help With Mega Menu

Ask the community
,
1

Hello everyone, I have been working on a mega menu and the issue I am having is when I drop the menu, go my submenu1 which opens another submenu and when I slide over to it my main dropdown menu disappears. How do I correct this? Is there an issue with my code that is make it to hide

export function megamenu_mouseIn(event) {
$w( ‘#megamenu’ ).show();
$w( ‘#AboutUs’ ).disable();
//Add your code for this event here:
}

export function megamenu_mouseOut(event) {
$w( ‘#megamenu’ ).hide();
$w( ‘#AboutUs’ ).enable(); //Add your code for this event here:
}

export function wagenerbutton(event) {
$w( ‘#wagenerbox’ ).show(); //Add your code for this event here:
}

export function wagenerbuttion_mouseOut(event) {
$w( ‘#wagenerbox’ ).hide(); //Add your code for this event here:
}

export function wagenerbox_mouseIn(event) {
$w( ‘#wagenerbox’ ).show(); //Add your code for this event here:
$w( ‘#wagenerbuttion’ ).disable();
}

export function wagenerbox_mouseOut(event) {
$w( ‘#wagenerbox’ ).hide();
$w( ‘#wagenerbuttion’ ).enable();
}

export function lexingtonbutton_mouseIn(event) {
$w( ‘#lexingtonbox’ ).show();
//Add your code for this event here:
}

export function lexingtonbutton_mouseOut(event) {
$w( ‘#lexingtonbox’ ).hide();
}

export function lexingtonbox_mouseIn(event) {
$w( ‘#lexingtonbox’ ).show();
$w( ‘#lexingtonbutton’ ).disable();
}

export function lexingtonbox_mouseOut(event) {
$w( ‘#lexingtonbox’ ).hide();
$w( ‘#lexingtonbutton’ ).enable(); //Add your code for this event here:
}

export function joannabutton_mouseIn(event) {
$w( ‘#joannabox’ ).show(); //Add your code for this event here:
}

export function joannabutton_mouseOut(event) {
$w( ‘#joannabox’ ).hide(); //Add your code for this event here:
}

export function joannabox_mouseIn(event) {
$w( ‘#joannabox’ ).show();
$w( ‘#joannabutton’ ).disable(); //Add your code for this event here:
}

export function joannabox_mouseOut(event) {
$w( ‘#joannabox’ ).hide();
$w( ‘#joannabutton’ ).enable(); //Add your code for this event here:
}

export function Ccolumbiabutton_mouseIn(event) {
$w( ‘#columbiabox’ ).show(); //Add your code for this event here:
}

export function Ccolumbiabutton_mouseOut(event) {
$w( ‘#columbiabox’ ).hide(); //Add your code for this event here:
}

export function columbiabox_mouseIn(event) {
$w( ‘#columbiabox’ ).show();
$w( ‘#Ccolumbiabutton’ ).disable() //Add your code for this event here:
}

export function columbiabox_mouseOut(event) {
$w( ‘#columbiabox’ ).hide();
$w( ‘#Ccolumbiabutton’ ).enable(); //Add your code for this event here:
}

export function chesterbutton_mouseIn(event) {
$w( ‘#chesterbox’ ).show(); //Add your code for this event here:
}

export function chesterbutton_mouseOut(event) {
$w( ‘#chesterbox’ ).hide(); //Add your code for this event here:
}

export function chesterbox_mouseIn(event) {
$w( ‘#chesterbox’ ).show();
$w( ‘#chesterbutton’ ).disable(); //Add your code for this event here:
}

export function chesterbox_mouseOut(event) {
$w( ‘#chesterbox’ ).hide();
$w( ‘#chesterbutton’ ).enable(); //Add your code for this event here:
}

export function aikenbutton_mouseIn(event) {
$w( ‘#aikenbox’ ).show(); //Add your code for this event here:
}

export function aikenbutton_mouseOut(event) {
$w( ‘#aikenbox’ ).hide(); //Add your code for this event here:
}

export function aikenbox_mouseIn(event) {
$w( ‘#aikenbox’ ).show();
$w( ‘#aikenbutton’ ).disable(); //Add your code for this event here:
}

export function aikenbox_mouseOut(event) {
$w( ‘#aikenbox’ ).hide();
$w( ‘#aikenbutton’ ).enable(); //Add your code for this event here:
}

export function missionbox_mouseIn(event) {
$w( ‘#missionbox’ ).show();
$w( ‘#missionbutton’ ).disable(); //Add your code for this event here:
}

export function missionbox_mouseOut(event) {
$w( ‘#missionbox’ ).hide();
$w( ‘#missionbutton’ ).enable(); //Add your code for this event here:
}

2

Sorry I think I should of mentioned that the missionbox is the main dropdown menu, the megamenu with aboutus is a different menu without any other submenus.

3

Hi there! Not sure if you solved this, but the solution would be to add a mouseIn event for the Sub Menu box that keeps the Main Menu box visible.
With the setup right now, the mouseOut event on the Main Menu box triggers when moving to the sub-menu.

Something like this should fix it (you’ll need to change the element ID’s of course) :

export function SubMenu_mouseIn(event) {
$w('#MainMenu').show();
}

export function SubMenu_mouseOut(event) {
$w('#MainMenu').hide();
$w('#SubMenu').hide();
}