MEGA MENU

"Okay, so now we're going to decide if you want to add Mega Menus. We've just looked there in the header that you've got the choice of using dropdown menus to build out your navigation, but now we can replace those dropdown menus with what we call Mega Menus. And to describe that, as I said in the opening, let's go and have a look at some of my clients and some of our Themes to inspire you as to what's possible.

Well, the first example we'll look at here is a client called Artefact and they've actually got three Mega Menus that roll down from services, examples, and our team. So let's have a look at their Mega Menu. Well, you can see it here. We've got a description of what services is on the left, then we've got a body menu injected into the center column, and then on the right-hand side, that's actually a widget. It's pulling in a feed for the latest article, so as they update an article, it'll replace there via a widget, which you'll learn more on. And this is the same format as we move onto examples. So hover over examples, you can see exactly the same format. We've got the text, the injected body menu, and then the key link on the right, and it's the same hovering over our team.

Now there's so many pages there, as you can see. There's a huge amount of pages just in three hovers that we can access. Plus we can really talk a bit more about this main overriding category. But in this text description here, this could be a client testimonial or some other key information. On the right-hand side here, it could be a form or it could be an advert or a promotion or a special. So Mega Menus can work in really cool ways. You only ever hover away, we haven't even clicked anything yet, and we're showing this key information about your website. What it does, it allows our header menu to have the minimum possible links. Incidentally, the fourth link here is a map which opens up a map directory. I think there's about 600 projects in the map that you can search from so you can showcase the work that they've done.

But this particular client also has an Action Section to get those inquiries under let's talk, and also it has a really detailed Menu Section as well. So I don't know how many pages are on this website, I should have checked, but there's a lot, right? And all that has happened from how many links have we got here in the header? Well, we've got the four, services, examples, and our team, and then map. Three of those are a Mega Menu. Then we've got the Action Section and the Menu Section, and obviously the Artefact link there links back to the homepage so we don't need to write home in the header menu because we can always click on the logo and that takes us back home anyway. So that's the first example.

So now let me show you another example. This client is called Euroluce. Now this is a lighting company, quite a prestigious lighting company here in Sydney. Now they've actually got over 100,000 skews on this website. I don't know what it was up to on the last count, but on here we've got five main categories under products and these are, again, injected banks of body menus. So rather than making text links, we've chose to put in body menus. So if the client wanted to edit this, they could go into the menus and navigation area and in there, there's five extra menus. You know how we had menu 1, 2, 3 and 4? Well, there's says indoor, outdoor, brand, effect and application, and that's a really cool use of a Mega Menu with five body menus within it. So this has got a header menu and then it's got a Mega Menu and inside that Mega Menu, it's got five other menus. So you can see we can build out really huge websites. Incidentally, the search on this one has got quite an advanced search and filtering. It's really, really cool stuff.

So that's the kind of stuff we do in the custom development. If you ever need MOBLE to optimize your navigation, build out custom search, even if it's hundreds of thousands of products, you can just give us a call. Even if you build a website, you can contract us to do all that custom development on top, which is a really cool perk of working with us in this platform.

So what I'll do now is just jump over and have a look at the Alio Theme that we're building out. Well, the Alio Theme has got two Mega Menus, what we're ultimately building. So I'm giving you a preview here of where we're actually going with this. We're going to build out now our products and our events Mega Menus. You can see these two here. Look at the slight differences. One's got a blue accent and the other's got a red accent, so blue for products, red for events, which makes it look quite nice. And then the events is using a multi-slider widget, and the products is using a product grid. So this is all stuff that you will know how to do. This is tomorrow on day three, I think it's episode seven. You can actually see us building out these Mega Menus from scratch, so not using a pre-formatted Layout, actually building from scratch. So that's a really cool tutorial, takes about 15 minutes and you will be able to do it yourself. It's not hard what we're doing here, it's just you knowing our process, how we build from scratch and you can just sit back, we call it watch and learn. You can just sit back and watch and learn how we do it and then you'll find that you can repeat those actions quite simply.

Well, let's jump over and have a look at some of the Themes. What we've got here, Dekker, which uses quite a complex Mega Menu, you can see here this time we've got four banks of links, and then we've got key contact us information, location and hours, and then a newsletter subscription form. So again, that's quite a complicated one. That one you just saw before, if you want to use this one, you can just go into the Layout Drawer, type in Dekker, Menu Section, drop it in, and that'll work for you as well. Here, this is an interesting one with Aswad because this one's giving away a $20 free voucher. So if people hit the become a member button there, they can go to a subscription form for their online shop and then $20 credit will be added to their account. So you're basically saying, "Give us your email and mobile phone number and we'll give you $20."

But what we do in this case is say that $20 is only redeemable once your cart value hits $100. So what you're actually doing is giving $20 away for free, but it's only redeemable when people have got, let's say, $100 in their cart so that's a really cool way of building your database and your customer acquisition because you can say, "Here's 20 bucks, but it's only redeemable if you spend more," so you're actually increasing what people spend and getting more customers at the same time. So tricks like that, you're going to learn in day five. Why not put those in Mega Menus? Because that's a really cool promotion that anyone can apply to your website.

Here we'll look at this one on Sumer. Very simple. This one isn't using an injected body menu. This is simply text links, product 1, 2, 3, 4, 5, 6 as we looked at before, and this one is using maybe a staff quote, maybe a client testimonial to support that trust in the Mega Menu. All right, so that's a few examples there just to inspire you. So now it is time for you to be thinking, are you going to use a Mega Menu? Do you need a Mega Menu? How big is your website? But if you do need a Mega Menu, let me go and show you how you attach that section to the header.

So I'm just going to jump back into the navigation areas you can see here and I'm going to click the edit button next to the header menu. And you can see here under the products tab, there's currently a dropdown menu that we've created, isn't there? So what I want to do is remove those dropdown items because we are now going to attach a Mega Menu to products, to the products page. So there's our products page. As we know the page URL is forward slash products. So what I can do now next to products is hit their orange, or mustard as we say, edit button. And in the popup here, you'll see we can link this to an existing Mega Menu. So if that Mega Menu already exists at this point, we can just say, "Right, I want to link it to this one."

But we don't have a Mega Menu yet for products, do we, so what I'm going to do is hit this new window icon next to where it says Mega Menu and that takes us through to the pages area where all our Mega Menus live. So you can see here, this is the first Mega Menu that came with the Theme. It literally says menu, Mega Menu. What we'll do now is actually just go and replace that. But before we do that, sometimes it's good to leave a Mega Menu there. Just in the case of Artefact, their three Mega Menus were all the same, weren't they? So if they wanted to add a new page in the future, a fifth page and make that the same Mega Menu format, well, what they could do is just come in here and hit the clone button. So notice the clone icon here. When they click that, a clone is created, and we know it's a clone because it says hyphen one.

So we want to go and change the page name for that and the page URL. So I'm going to go over to the settings tab. So click settings and open it up. So the first thing I want to do here is know what the page is called. So I'm going to call this one products Mega Menu. Now, to attach that to the page, I just need to, in the URL, do a little trick and this is what it is. When it's a Mega Menu, it always starts with menu hyphen, and then it's saying, "Well, where do you want this menu to attach to?" Well, I want this one to drop off the products page, which URL is forward slash products. So to do that, I would simply type in menu hyphen here, then the URL which is products. So if I want to attach this to the products page, it's menu hyphen products, and the URL for the events page is slash events. So if I'd want to attach it to the events page, it would be menu hyphen events. So it's just menu hyphen and then the URL, and that attaches this Mega Menu to that tab, that page in the header menu.

So at this point, what I'm going to do is fast-forward in time, because tomorrow in episode seven, I'm going to show you how I build these Mega Menus from scratch. So there's no need to cover that now because you haven't had the learning that you're going to learn in episode one tomorrow. But look how cool this is. On my Mega Menus, this is the end game for the Theme that we're building. You can see here if I hover over products, I've got this beautiful menu which has got the title on the left and a description. That description, I could get the AI tool to go and write a little description if I don't want to use the kind of out of the box description, and it's got a buy now button and that buy now button links to forward slash products to all of the products.

And then on the right, I've got a selection of some key products that we're selling. So in this case, these are the products tagged with upsell, which you're going to learn a bit more about when we look at widgets later today. But it's basically a feed of the key products that I want to show or the products for this particular category. So that's a really nice way of doing a Mega Menu. And some of the cool design features in this one, you'll notice it's got a background image there, and the image is slightly blurred out so the text is more legible on top, and there's actually a gradient in the overlay, which is the same Colour as that button. So it marries it all together, which is really nice.

But when I move over to the events Mega Menu, as you can see here, this one has got the pink button this time, and it's got the pink in the background. Again, it's got the blurred background image and the pink gradient over it. Again, that's really nice for the text legibility. And as far as the widget, unlike the product which was used in a grid, this one is using the multi-slider carousel on autoplay. I could have it with arrows so you manually press the arrows, but this one's just on autoplay. So you're going to learn all of that. We're going to introduce the widgets later on today in one of the episodes. But this episode, pretty sure it's day three, episode seven where you'll see me build these two Mega Menus from scratch. That's going to be a really cool episode."