The main principles of using giant menus should be able to answer a simple question:
Can the giant menu make it easier for users to browse my website?
You shouldn't add one just because they are the latest trendy stuff. Adding a giant menu on your website should take into account the User Experience (UX). If your mega menu makes the navigation process smoother and more intuitive, add one. If not, or you only need few items in the menu, stick to the regular drop-down menu.
When deciding whether to use the mega menu, you may also want to ask yourself another question:
Can the giant menu help my website achieve its goals?
You may think this is a vague question that is difficult to answer, but all aspects of website design and content should be associated with what your website is trying to achieve. This may be one of the following situations:
I believe the website may have more goals, but these are some of the most common ones. Understanding your goals will help you know exactly which pages you want users to visit in order to achieve your goals.
So if you want people to buy products online and you have a large and complex store, a giant menu is likely to be the best choice. But if you only have a very specific product or service and you want to direct people to the sales page of that product or service, then the giant menu can be distracting.
Before you decide whether to add a giant menu, take some time to think about what you want your website to achieve, where you want visitors to go on the site, and what kind of navigation will encourage them to do so.
The following are some specific examples of a giant menu that may enhance your website.
Let's look at some of the mega menus as useful additions to the website.
If your website is a retail website, users will be used to seeing giant menus and using them to browse various departments of the store.
For example, the John Lewis website shown below uses a different mega menu for each major section of the store. The following is the women's clothing section:
People are used to using giant menus on websites of large department stores and are not confused. For example, if I visit the site for a dress, I can easily enter the corresponding part of the site with one click.
In some cases, a drop-down menu or a series of drop-down menus will contain so many options that it will reduce the user experience.
A study conducted by Jakob Nielsen and Angie Li shows that for large navigation menus, giant menus enhance user experience compared to drop-down menus. This is because a drop-down menu with a lot of content will ask the user to scroll down, sometimes need to scroll down and then scroll up again. This takes longer, puts more stress on short-term memory, and can be confusing.
Therefore, if your website needs to include many elements in the navigation menu, the mega menu is likely to enhance the user experience. But make sure if you do use a giant menu, you build it in a way that is intuitive to the user, and you use design tips like colors, text effects, and fonts to make it easy to browse.
The Game website below is a great example of the giant menu series, each related to a part of the website. These menus use spacing and text effects such as bold text and backgrounds to make the menu intuitive and easy to navigate.
### 3. When the menu design enhances the website
Sometimes, you have the opportunity to add content to your website that is more than just text links.
The Moleskine website shown below has a unique mega menu. In addition to text links, it also has photos of key products that act as links with text that cover them.
This encourages visitors to visit these pages and makes the mega menu more than just a functional aspect of the website – it enhances the design and helps achieve sales goals.
Sometimes you shouldn't use the mega menu. Here are some examples.
If your website does not have hundreds of pages, then the giant menu will appear redundant. For a normal small business website or blog, a giant menu will only confuse visitors—and it will also look empty.
The Envato Tuts website uses a combination of giant menus and normal drop-down menus. For parts of the website that have few links, a normal drop-down menu can complete the task and cover fewer pages:
### 2. When your homepage is just a link
If your homepage is just a page that links to a subpage, then you don't need a giant menu either.
The British government website is an example. Its homepage is a page full of links:
Once you further navigate to the website, there will be a left navigation menu that can be expanded:
This is also a good example of not using a mega menu in an environment where users may not expect to use a mega menu. For example, in public sector websites, mega menus are less common than in retail sites.
Sometimes your website is designed to sell one or two products or services, or to encourage signing up for mailing lists.
If this is the case, you may have a banner on the home page that directs the visitor to a login page.
In this case, you want the navigation to be kept to a minimum. The giant menu gives visitors so many options that they are significantly less likely to visit the page you want them to visit. So keep your navigation to a minimum and focus on directing visitors to your login page.
The Social Media Examiner website is a good example. Now, they want visitors to do one of two things: sign up for their mailing list or buy tickets to their meetings. The banner reflects the second point, while the call to action that occupies the top part of the homepage reflects the first point.
If they give visitors a large, giant menu, it reduces the likelihood that they do either of these two things, so they keep navigation simple instead.
### 4. On mobile devices
Creating a mega menu that is easy to read on a small screen will be difficult. To make it work, you have to either make the links small, which means people won't be able to click on them or introduce scrolling. Combining a giant menu with scrolling can be confusing because it's hard to know where the giant menu ends and where the page content begins.
On mobile devices, it is best to use the hamburger menu: a menu that won't be visible until you click on its symbol. It's often called a hamburger menu because the symbol: the three vertical lines look a bit like a hamburger.
The John Lewis website mentioned above has such a menu. Click the symbol and the menu options will expand below it.
Things to note when adding giant menus to your websiteWe just discussed when we should and should not add giant menus to your website. If you think giant menus will improve the usability of your website, it's time to learn about some important things to remember before adding giant menus to your website.
The giant menu usually contains many links. Therefore, it is important to be organized and divided into appropriate parts. This is evident in the giant menu screenshot on John Lewis’ website. Links under the Women’s section are further placed into different categories that are easy to navigate.
You also need to make sure all links in the mega menu are easy to read and click. There should be enough spacing between links so that users don't accidentally click on content they don't want to access. They should contain limited text, but still help users understand where they will take the user once clicked.
You may also want to add some visual tips to the navigation menu to help users understand how links are organized. For example, the arrow icon will indicate to the user that clicking on a specific submenu item will display a bunch of new links. Clickable and non-clickable items should be easily distinguished.
The giant menu is complex and resource-intensive. They require a lot of tags, CSS, and JavaScript to work as expected anywhere. Some giant menus also use images heavily. This can adversely affect the menu and the loading time of the website. You won't want your prospects to get bored by waiting and then turn to your competitors. Therefore, keeping the mega menu optimized should be a priority.
As we discussed earlier, Giant Menu is not working well on mobile devices due to the small screen size. You should consider providing another way of navigation on a smaller screen to keep your website responsive. For example, you can use the burger menu on your mobile device and maybe delete the image in the navigation menu on the small screen, using only the basic link.
Users will often use your giant menu to jump to another part of the website. You can use this knowledge to increase user engagement by skillfully adding some call-to-action or promotions in the right place.
What seems obvious and correct to you in a mega menu may not be the case for users. So it is important that you have to keep A/B testing of your mega menu to find out which layout is best for your situation.
It is also important that you should test your mega menu on as many browsers and devices as possible. Giant menus are complex UI elements, making them look right can be a little tricky. At the same time, make sure all links in the mega menu work properly.
If you have decided that the mega menu is the right choice for your website, the easiest way to add a mega menu is through the plugin.
CodeCanyon offers many giant menu plugins for your choice. Some of the most popular ones include:
For more inspiration for creating giant menus, you might want to check out these other posts on Envato Tuts:
The giant menu can be a great way to improve the user experience of the website. If you have a large website with lots of links, adding a giant menu will help your users navigate. If your website meets the requirements, try adding a giant menu today.
The above is the detailed content of When to Use (And Not Use) a Mega Menu for Navigation. For more information, please follow other related articles on the PHP Chinese website!
How to turn two pages into one word document
OuYi Exchange app download
How to resume use of gas after payment
WeChat steps
How to deal with garbled Chinese characters in Linux
How to modify the hosts file
What are the methods for restarting applications in Android?
Java-based audio processing methods and practices
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
