Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Mega Menus Overview

In this lesson, I’ll give you an introduction to mega menus, with some real-world examples. I’ll also present an overview of how the mega menu will work with our site design.

Related Links

3.1 Mega Menus Overview

Hello, and welcome back to this Tutsplus course on WooCommerce. In this section of the course, we're gonna move on to mega menus. And we'll create a mega menu for our site that will give our users access to a range of custom attributes that we're going to set up for our products. But before we do that let's have a look at mega menus and how they work. And I'll show you some real life examples of mega menus in action. Now, there are two types of mega menu that you can use. You can either use a mega menu that drops down from your navigation bar, so it looks a little bit like a normal navigation, but much wider, with content all the way across taking up as much space as you need here. Or you can have a mega menu that drops down on the left hand side and then expands to the right. And I'll show you some examples of both of those. So let's start with a very large mega menu at the Target website. And here you can see there are links on the left hand side to the top layer of navigation, and then if you hover over each of them, you get a large mega menu that gives you a whole range of things that you can buy. So there's a mega menu for each of these, and what you'll find is that there are overlaps. So for example, here in clothing, shoes, and jewelry, there'll be overlaps, for example, with activewear here in sports, fitness, and outdoors. Now the great thing about using WordPress is because all our products are in a database, we can add them to as many categories as we want, give them as many attributes as we want, and therefore, give access to them from multiple places in the mega menu. Now, let's take a look at another example. The Amazon website has a similar menu that appears on the left hand side. And then, if you hover over any of these categories, you'll see the mega menu appearing on the right. Now, this is a bit more sophisticated than the one we saw at Target. It's more than just listings, you consider promotions and images here as well. Another menu that works in a similar way is the Walmart menu. Again, you've got top level categories on the left and then there are a large range of categories underneath each one with some images and pop-ups to help encourage you to buy. So those are a few examples of mega menus that work from left to right. Now let's have a look at some mega menus that work top to bottom. The next website is predominantly clothes with some home wares. Instead of having one menu that you would hover over and see links on the left, as you can see, there are multiple mega menus for different categories. And again, there are overlaps. So the lingerie department here is also represented in the women's department over here. So again, this store will be powered by a database, and things will be added in multiple categories. In home and furniture, you've got another layer of mega menu in here. You've got tabs within your mega menu and all the subcategories for each category there. Another mega menu that works top to bottom is on eBay. Here, there's a mega menu under each category, and there are less subcategories under each of the top categories. But what has been done here is a lot more space is taken up by photos and large links. So this takes you to the electronics and technology section. There are also some icons over here on the left hand side. Our final example of a site with a top down mega menu is John Lewis. This one isn't dissimilar to the next site. There are lists, subcategories in each section of the site. And as you can see, there are overlaps again. So here the women's section is gonna have overlaps with the beauty section, and possibly with the gifts section as well. Because as you can see, there's a gifts for her section. Now, what you might've noticed is that I'm occasionally having problems when I hover over these mega menus, because things disappear if I move my mouse. It's very important to bear this in mind from an accessibility point of view. So your mega menu needs to be coded in such a way that if people need to switch it off, they can still access the content within that menu. So it should be output within the markup of your page in a logical place. And also it should be possible to skip past that menu if you're using a screen reader. You should also make it so that people can click on the top level if they need to and go straight to that department. And here you can see there's another menu on the left hand side, which is going to be easier for people to interact with if they're just using a keyboard. So those are some examples of mega menus. In our store, we'll create a mega menu using attributes for each product. We'll set up some custom attributes in WooCommerce. We'll add some code that make those attributes work as archive pages, and we'll then add a mega menu using a plugin that takes people to those archive pages. Finally, we'll style our mega menu and make sure it looks appealing and encourages people to buy. See you next time, and thanks for watching.

Back to the top