Let’s talk about mega menus!
We all know what they are. You go to a website, you mouse over the menu, and this giant box pops up with all kinds of information in there.
We're going to offer two different ways to add that to your Wix website today, code and no code
Check out the video...
Full disclosure, there is a full code option that is much more sophisticated. We're not going to cover that here today. We're going to go strictly with no code and light code, very light code.
We're going to call it code versus no code.
When to use the mega menu?
If you have a lot of information to display a big e-commerce catalog a media site with a lot of topics, you might want to consider a mega menu. You also might want to consider. If you just want to differentiate, maybe you just want this visual display of information in your menu.
Just be careful and keep in mind that most websites are about funnels. Where are you trying to funnel the visitor into? A navigation menus primary purpose is to get the visitor from that page, likely the homepage deeper into the site. So, if you're distracting them with lots of flash or, or imagery you might be hurting your conversion rate. You might not be getting as many conversions as you possibly could.
A little saying we have here, at BizLadder is flash does not equal cash. Just because it looks great, doesn't mean it's going to turn into revenue or leads or whatever you're trying to accomplish on your website.
Let's dive right in code verse, no code. Some considerations:
1. How do you want to display on mobile? If you do, you probably shouldn't.
2. Do you want it a hundred percent dynamic or hard-coded in some fashion?
3. What's your comfort level with code? You just want to completely avoid even the light code version. That's fine.
4. What's the desired exit action? Meaning a hover away from the mega menu or an actual click. Do you have a preference there?
5. Alignment gets tricky with the no-code option. We'll talk about that.
6. What kind of display delay do you want? The no-code option is going to have a little delay in most cases
Let's talk no code. This is going to be utilizing a Lightbox. We have a bunch of different starting points for light boxes. I recommend using one of the welcome light boxes. You can try lots of different ones here. The reason is control. You can control placement of the light box itself and the objects using the settings in the light box a little better with the subscribe light box. First thing we're going to do is change the overlay background. Get rid of that. Traditionally, light boxes don't obscure the background, the rest of the page.
Now we're going to change location…being cognizant of alignment. This will get tricky with light boxes. You have to test this out on different screen sizes. I've got a left align menu. I've got about 120 pixel offset. You can play with that. Get it perfect.Let's get rid of the animation. Menus are meant to deliver visitors to other parts of your site. Don't delay don't stall. Don't give them reason to leave the site. Every fraction of a second matters. I try to remove animations with any sort of interactive element. I just really don't like clicking and then making the visitor wait, you know, it might look great the first time it's just going to annoy them the second, the 10th, the 100th time they have to click and wait.
We have to change the auto display. We don't want the light box showing up just when somebody hits the page. Obviously, you can change whatever you need to in this light box. We're just going to leave it as is for now. You can add any elements you want to add text images, dividers, make it look however you want.
Now we have to link to it. How do we access it? What we want to do is create a link menu item, linked to a light box. It's the only one in there that's easy. You can create as many of these as you want. If you have a very big site with lots of information, you can create multiple light boxes and triggers
On click our light box pops up. You can see when I move my mouse outside of this light box, nothing happens. I can click the X, closes it obvious, right? I can click outside. The light box closes it, but the mouse action, the hover action does not do anything to this light box.
Keep that in mind. When we take a look at the code option. Also want to show you a really important thing on Wix editor, especially editor X, of course, but even editor I'm on a big desktop monitor here.
It might be 31 inches. I need to look at how this appears on smaller versions. You can just maneuver the window size and get a good look at how this light box appears on smaller versions.
You are likely to run into some alignment, challenges, frustrations with these light boxes and this layout.
That's the no-code option. That's the light box option added on its surface.
Let's take a look at the code option. If you're afraid of code, don't be, this is very simple.
You can turn dev mode on and then off. You don't ever have to look at it again when you're editing your site. But the first thing you do need to accomplish is turning on dev mode.
What we want to do for the code light code option for these mega menus is use a button to trigger it.
Why? Well buttons are made for links. They have hover actions. They're good on mobile. They generally work. You can use any object.
You want to trigger this? I recommend a button. You can change the design.
Then what we want to create is a container, a box.
There's definitely a question on how to get this to trigger on every single page of the website. Right now, this container is only on my homepage.
I could pin it. That gets weird. It really doesn't work. Here's a trick to get this, to appear on every page, trick the system, to think it's inside the header.
How do you do that? You drag it into the header. You drop it, you drag it back out, but not all the way.
See if I go all the way out, it says attach to the strip. I don't want to trigger that and I can resize it and I can choose my arrow keys and move it around.
This is a container box. You can add whatever you want to this same thing as with the light box.
All right. So, we've got our box here, which thinks it's in the header.
Now here's where the code comes, comes into play. The button itself, has got this little ID down here in the properties. These are the properties of this object. Let's name this menu box as well.
When the page loads, we want to hidden, we don't want this to appear. All right. So hidden. Let's go back up here to the button.
Now we're going to tell the button. You can see what it did there. I made a little transparent. That means it's hidden on page load.
Now this button, we need to tell it when somebody hovers over this button, show that box We do that with an Mouse-In event and then add the code $w("#bigmenu").show();
That's what happens when you mouse over but what happens when the mouse leaves the box? We don't want it to just stay there.
So we have to add on mouse out event as well. But we do that on the box itself and not the button and ten adding the code $w("#bigmenu").hide();
It's going to show when they mouse over button, it's going to hide when the mouse out of the box itself, let's preview it and I'll show you.
It's a little bit funky. It's not perfect, but this is what you get with light code. So you can see, oh, it's still there.
Let's talk a little bit about mobile. We get a lot of questions about adding a mega menu to mobile. In short, just don’t do it. You already have a mobile menu lightbox effectively. So just use that