Creating a Mega Menu

Ask the community
,
1

Hi everyone, I am stuck here. I am looking to make a mega menu for a very large website and have almost everything working. How can I make this transition from button to button without having to hover over the box that is show after the hover on the buttons?

Here is my example site
https://discovergilacounty.wixsite.com/my-site

I want the box to stay on the page for the mega menu but want the tranisiton from button to button to be able to happen without mouseIn and mouseOut of the previous box that was shown.

Can anyone help?

Code below

$w.onReady( function () {
});
import wixLocation from “wix-location” ;

export function livebutton_mouseIn(event) {
$w( ‘#livebox’ ).show();
}

export function livebox_mouseIn(event) {
$w( ‘#livebox’ ).show();
$w( ‘#livebutton’ ).disable()
}

export function livebox_mouseOut(event) {
$w( ‘#livebox’ ).hide();
$w( ‘#livebutton’ ).enable()
}

export function explorebutton_mouseIn(event) {
$w( ‘#explorebox’ ).show();
}

export function explorebox_mouseIn(event) {
$w( ‘#explorebox’ ).show();
$w( ‘#explorebutton’ ).disable()
}

export function explorebox_mouseOut(event) {
$w( ‘#explorebox’ ).hide();
$w( ‘#explorebutton’ ).enable()
}

export function workbutton_mouseIn(event) {
$w( ‘#workbox’ ).show();
}

export function workbox_mouseIn(event) {
$w( ‘#workbox’ ).show();
$w( ‘#workbutton’ ).disable()
}

export function workbox_mouseOut(event) {
$w( ‘#workbox’ ).hide();
$w( ‘#workbutton’ ).enable()
}

2

https://www.wix.com/velo/example/mega-menu

https://www.media-junkie.com/simple-megamenu

3

Hello,
I think I know the answer to your problem. This should work if you are using the developer mode. Click the ‘+’ button and click on ‘boxes’. Then, you have to click on ‘hover boxes’. Then, you can choose a style you want or scroll down to the bottom for a plain one that has a vector image. You can change the image to be any vector image. Sadly, it cant be text but it can be a picture of text. You can choose how big you want the hover box to be by using the regular tool to change the size of something (The buttons on the border of the item that you can drag). If you click on the hover box, you should see a green lightning bolt. If you click on it, it will give you information about hover interaction. If you click ‘edit hover interaction’ everything will turn a lighter shade of white. You have just entered hover interaction mode. Anything you add in here will show up when you hover over the box in preview (Also when you publish it and view it from there). The only time hover interaction doesn’t activate is when your editing. Also for everybody else that is viewing the site, hover interaction will still be there even if you are editing. Basically, if you wanna see the hover interaction, you have to click on the hover box, click the green lightning bulb, and click ‘edit hover interaction’. Also, keep in mind that you might wanna check if the vector image has any animation or special effects inside hover interaction mode because that happened to me and I couldn’t figure out what it was. To see if there are any animations on the vector image, you click on the vector image and click the button that looks like a bunch of squares next to each other and fading away. Then, you can see the animations. Everything works the same in hover interaction mode. You can add regular things like menus, buttons, or even more hover boxes. I think I have covered everything. Please tell me if you need anything else. I hope you find this helpful!

4

Also, on line 16, I forgot to type: Basically, if you wanna see hover interaction while editing …

5

This one could be solved?