Blog

Mega Menus and Ways to Use Them

Reading Time: 8 mins

These giant menus are fast becoming popular in the web design world, especially within the realm of ecommerce. Take a look through the examples we’ve collated below as well as the reasons we’ve supplied for why a mega menu may be a good choice for you!

Examples of Mega Menus that are working it!

Mega menus are great if you’ve got a lot of products. Instead of directing people first to a specific category, menus like the one on Engadget allow a user to drill down quickly and easily to the section they’re looking for. Plus, the little icons that Engadget have incorporated also make the menu that much more readable – kind of like a space in between two paragraphs.

 1

 

What about mega menus that include pictures?

Some mega menus (like LG’s), incorporate pictures. In LG’s case, category pictures. You might ask why but just think of the amount of home page space these category images/boxes would otherwise take away? The home is the branded space – the place you want to quickly and easily be able to change to suit whatever marketing campaign you are running. Plus, they just make the WHOLE navigation a LOT easier to make sense of, especially as there’s a lot going on within it. With the addition of pictures, you can quickly and easily see what section you’re looking at.

 2

 

We’ve taken this a step further with one of our own Xanthos-designed websites. Take a look at the Ashe website and at how we’ve chosen to display the product images to help clients quickly find the product they’re looking for.  Because we’ve incorporated both an image and a few bullet points that highlight what is unique to each product, we save potential clients an immense amount of time AND make it easy for them to compare each product side-by-side.

ashe

Mega Menus as Micro websites

Okay, so you do a LOT of stuff. You sell products, you’ve got learning resources, you offer services and support, you’ve got ongoing deals/promotions, you’re in the news all the time….let’s be honest, ONE homepage is not going to cut it, especially when all that important information is below the fold.

A mega mega menu (how I’m referring to these menus) is a great way to get around losing content below the fold of the page. Obviously it’s not immediately on display, but a simple hover will show all the necessary detail. Nikon has done a fabulous job of it!

4

Plus, it’s a fantastic way to give people a shortcut to the place they want to go. Instead of looking hard for the ‘register a product section’, all I have to do is hover over service and support and…look there, a neat little button that directs me to the relevant page.

 3

 

Shop the way YOU like to shop

Everyone shops differently. I shop by ‘section’ and sometimes by sale items. For someone else, it’s by brand….

Take a look at House of Fraser’s website. They’ve got it. Notice that you can shop by department OR by brand OR by sale items OR by style. And of course, because they’re using a mega menu, you’ve got that neat shortcut to the item/link you’re looking for with, well very little looking!

 5

In fact, House of Fraser has a ‘double’ mega menu option. See that left-hand column? Well move down to the section you’re interested in and…the whole menu changes!

 6

 

Do something different – even your menu

Now, if you’ve got the money to SERIOUSLY experiment…do something like Intel have done. Never mind the Windows 7/tablet style site … look at the menu. You have to CLICK menu to get there and then click into the product you want. At first this is a little confusing, but after a while you realize it’s NICE because hovering away from the menu does not immediately make it disappear. That’s one of my main peeves with mega menus: hover slightly over another area and your menu is gone or your place within the menu is lost. This one doesn’t let that happen. Plus, it also turns the menu again into something that’s more like a website. You can’t accidentally ‘hover’ out of the menu, you have to click the homepage to get rid of it.

 7

So you’ve got VISUAL customers

Or your product is best sold/found by first presenting the client with a visual. Display Wizard is one sharp company. Take a look at their mega menu.

 8

9

Sites that do a bit of it all

Hallmark is another example of a site with a mega menu that acts more like a set of microsites … including all of the information that would otherwise be lost below the fold, in logical sections of course. And, it’s another example of a site that lets you shop the way you like to by occasion, by products, by characters, by collections, etc.

 10

 

Now take a look at Jenier World of Teas. Look at their menu. They’ve also done a bit of everything: included a popular item with picture, categories that allow you to browse the way you want to and answers to all those questions you’ve been asking about tea! Or, all that information people as interested in tea (like you!) are looking for.

 11

12

Now, if you’re a company that does as much as IT Governance (another Xanthos client), a mega menu is a great way to make your content easy to comprehend and easy to access. IT Governance is unique in that they provide information; sell books and training courses; sell software; offer consultancy services and other technical services. That’s a LOT to put into one site and is one of the main reasons we opted to go for a mega menu. Take a look at a couple of the screenshots below.

ITG1

ITG2

Special Christmas Offer

Don’t forget to look out for our Special Christmas Offer – valid for just 25 days. If you’re on our mailing list, you’ll get the email and information on Monday. If you’re not on the list, hop on over to our homepage and sign up.