What is going on Wix nation NPS from Wix Training Academy here. And today, I'm going to be showing you how to build a mega menu in Wix.
Now, how did this tutorial even come up you may ask? I know I usually don't give a backstory, but this one was kind of interesting. So my friends here at college, actually, they're looking to build a sports blog. In fact, actually a couple of years back my buddy and I launched a sports blog and they're looking to reinvigorate it make it bigger, better, stronger. Then we were able to do with just the two of us. So it's going to be really cool, but I was in the graphic design lab with them the other night studying for finals here. And they're like, "Hey, can you do this? "And they showed me an example of Bleacher Report. And I'm actually gonna just go ahead and show you what they showed me and take you through the story.
So they showed me Bleacher Report, which I'm a huge Bleacher Report fan. Anyone that watches sports, Bleacher Report is pretty high on the news list. And if you hover over NFL, it pops up a little sub menu or mega menu as it's called, and you're able to go through and you're able to click on the team you want. And they said, "Hey, Michael, can you actually build this in the site?" Because I'm helping them relaunch the sports blog and build the site out. It's kind of a group effort. And I was like, yeah, I think we can do that. Shouldn't be a problem.
How To Build A Dropdown Mega Menu in Wix
So now I'm going to show you exactly what I did on that night in the graphic design lab and explain how to go about doing it before we jump into a dough, I would kindly ask that if you liked that little story, drop a like down below and comment in the comments, did you like the story, yes or no.? And then in addition to that, make sure you click that subscribe button, the bottom right of the video and turn those bell notifications on so you never miss a single upload here and you'll instantly plug into 30,000 plus other like-minded entrepreneurs. I'm excited to dive in. I hope you are too.
So as you can see here, I kind of, this is literally what I showed them that night. This is what we built out that night. Very basic, just the demonstration. But what we're going to do is I'm going to go ahead and I'm going to take you just to a new page and we're going to do the same thing. So I've got the page open here. We'll go ahead and use this button as well. We'll name it for the sake of this NFL.
Now you're asking yourself here, wait a second. Why are we using buttons? Not the actual menu itself. So the way I'm going to show you, because this is the way that it's probably best to go about it is using a button menu. So creating your own button menu. But if you create it once in the header, it'll stay. So it'll stay in the header across all of your pages. So it'd be just like having this regular built prebuilt Wix menu, but with buttons and it'll be a button menu. So it's a little bit more upfront labor if you will. But if you're looking to build a somewhat nice clean mega menu with it, it'll be worth the upfront labor. And then you can always change a button. I'll show you the design here, if you wanted, and you can get rid of the fill color and you can just make the text, whatever color you want. So then it just appears as if it's text. So just like a normal text menu rather than buttons.
So we'll go ahead and do that. And we'll say, this is NFL and we're going to link to NFL. So now what we're going to do once we've got our button intact is we're going to go ahead. We're going to click add, and we actually have to build and design our mega menu. So I'm just going to go ahead and add a box and I'm just going to keep it very basic. And again, I'm not going purely for design here, guys. Let's see so now we're going to go ahead and move up, going to draw down. It looks like my girlfriend just texted me. Apologize for that looked like a nice text though. So we build the box in.
So the box is actually going to contain the menu. And then what you have to do is you have to determine if you want other design elements. So like I'm Bleacher Report. They had an additional kind of gray box that followed it. So if we're going to go off the terms of that, I'll just kinda go off the terms of that. So I'm going to go ahead and build that gray box into this. Got that right there. Now I'm going to change the design of this. I'll make it this color. And again, guys, this is just for the purpose of the video here to kind of show you I'm going to have that drop there. I'm going to have the box drop onto the page, not into the header. So it doesn't cause any design problems right there.
Then what you can do is now that you've got your box in here, I know these colors does doesn't look the greatest, but this is for testing purposes, right? Guys, testing purposes, you can come in here, don't critique the design, please. You can go to text and then you can come in and start adding some texts because you're going to, you can either add text or additional buttons, whatever you decide. Sometimes in the mega menu, it's just easier to work with the text. But again, it's completely up to you.
So then you could come in here and just like Bleacher Report, I'll change the color. So would, this can go and gray can be like teams and we can add it up here. And then maybe we'll have one for, they had one for tickets. Let me let's do that. Make this a little longer. It's kind of a build with me here. I'm taking you exactly through the process that I took them.
So now we got teams we got tickets. Now I'm not going to go and add every NFL team in here. Absolutely not. But what I am going to show you is I'll just, being that we're in Arizona, not currently, but that's where my family currently resides. I'll do NFC West and I'll just do one team right now. So for the sake of it, I will do the Cardinals. My favorite team is actually the Pittsburgh Steelers. I'm originally from Pennsylvania for those that do not know.
Now, what we have to do is we've kinda got our mega menu here. If you want these linked up at the top, you need to add a hyperlink to it and you can link to wherever you want. So whether that be a page, web address, etc. So if maybe you've got an affiliate deal with Stub Hub, you can link to tickets to your affiliate link on Stub Hub.
Now for teams, right now I'm just going to link it to this page. I called NFL, right? I'm going to click NFL and I'm going to remove the underline on that to get rid of that. Not a big fan of that. And now what should happen is when the mega menu opens, we should be able to click Cardinals and it'll take it to that NFL page.
Great! Now we've got the mega menu built out. How do we actually make it function? Right? So what we have to do is first and foremost, we have to go over to our button and name it, NFL Button. Once we do that, what we're going to do is we have to add a "onMousein". Why is it "onMousein"? Because that means on hover. So when the mouse enters his button, when it hovers over the button, this sub menu, our mega menu is going to show. So we're going to add an "onMousein", and then we need to add a little bit of a function here. So let's show you
So this was from our testing purposes earlier on in that graphic design lab. So you're literally just going to do that and we have to change, have to get rid of that code that was testing. And then we have to name The ID of this mega menu. So we're going to name it mega menu.
Okay. Mega menu. And then we have to change that ID in here. I'm going to show you something cool, which I don't know if you notice this, but has like an automatic popup now.
So you'll click, we'll click mega menu. And now it's set to show mega menu ".show". Once that button is hovered over, however, we do not want our mega menu showing as soon as the page loads, why? Because I would look stupid if someone doesn't offer over it and it would look odd. So we're going to click "hidden on load". Okay. Over here in the properties panel, when this is not active show, when this button is not hovered over. So it's going to be "hidden on load" we're going to save that and we're going to preview.
All right guys. So let's let's preview. What happened to our little NFL guy button there. Oh, did I accidentally delete it? Oh, maybe I did. Alright. I should probably get that thing back. All right. So I'm going to add the button here. Going to name it NFL button. I'm going to change the text to NFL. Now we got, we're going to have to run re-add the code to work in progress, guys. This is the, this is the debug and this is literally how I felt in that graphic design lab. The other night I was just cooking up something cool and working through it.
Now let's give this a test. Alright, so we got NFL. So what should happen now is I should be able to hover over and our mega menu pops up. I should be able to scroll down and I should be able to click on Cardinals and it takes me to the NFL page. Let's see. Perfect. And just like that, you've got a working mega menu in Wix.
Guys, I don't know about you. Was it a little bit choppy getting to the end result? Yes. But that's exactly how it felt in that graphics design lab. And I wanted you to feel like you were sitting there with me. That's right, Josh, right here, Jordan, over here. That's who was with me and now you right here, just with me, just like that.
Conclusion
Drop a like if you enjoyed this video, if you're excited to go build your mega menu, comment again, if you enjoyed the video, if you're excited to go build your mega menu and don't forget to hit that subscribe button, the bottom right of this video and turn those bell notifications on. We have a goal here to hit 50,000 subscribers by March 1st. I need your help to that. So it starts by clicking that subscribe button, watching the content, sharing the content. It's Christmas time. I love it. I get to go home here at the end of the week after finals week, which is always an exciting moment. So let's get one more films up for that because anyone that's been through finals understands.
Alright guys, thank you again. I'll catch you on our next one.