One of the key elements of intuitive and easy-to-use web design is the menu. If you want to make your menu stand out among most of the other ordinary web menus out there, you can use the mega menu to include images, widgets, and virtually any interactive web element that you want within your menu. And if you are a WordPress user, there’s a plugin for that.
Making Sense of Mega Menus
What is a mega menu? It’s one of the recent trends in web design that has been picked up by major sites, especially in the e-commerce realm such as Wal-Mart, OfficeMax, Target, Adidas, Puma, Toys-R-Us, etc. The nature of a mega menu makes it perfect for online retailers. But it’s also ideal for other kinds of websites, such as The White House or IMDB.
The menu is as old as the website itself. It’s the tool that visitors use to help them navigate websites they visit. Traditional menus that we’ve grown to love and hate give users strings of text and drop-down text to accomplish their task, but a mega menu takes things up a few notches. The mega menu allows users to add other web elements to the menu. For example, you can include the latest five posts from your blog along with their featured images inside the menu. Using this ability, online retailers can add images of their products and maybe the deals of the day in the mega menu and use it as another billboard where they can further promote their products.
Adding a Mega Menu to Your WordPress Blog
If WordPress powers your website, and you want to insert the mega menu as part of the user experience, the process is as easy as installing a plugin and doing a little setup. There are several alternatives that you can find in the WordPress plugin repository, but we are going to use one of the most popular ones with over 100 thousand installs, an almost perfect five-star ranking, and that is regularly updated: Max Mega Menu. You can use it with your existing theme and edit it by dragging and dropping the elements. You can get the plugin from within your WordPress dashboard by going to the “Plugins -> Add New” menu and searching for “Max Mega Menu.”
After installing and activating the plugin, go to “Appearance -> Menus” from the sidebar. Then you need to enable Max Mega Menu via its settings to the left of the menu tree. If you can’t find the settings, try to select “Primary” as the menu to edit from the drop-down. You will see the additional Mega Menu options when you hover your mouse pointer over one of the individual menu items.
You can use the existing menus as the base to add mega menus, or you can also create a new set of menus from scratch. We won’t discuss how to create a menu in WordPress, as it’s another story by itself, but you can refer to the official page for guidance. Clicking the Mega Menu options will launch a panel containing all of the Mega Menu settings for this menu item. The basic actions that you can take are:
Choose between the regular, cascading, drop-down menu called the “Flyout” or “Mega Menu” where the menu area fills the menu width Add available widgets to the menu Choose how many columns you want to use for that particular menu
Each additional widget comes with the edit button to allow users to adjust the content inside. Since the final results will depend on what widgets you put in the mega menu, everything comes down to what widgets you have in your arsenal. The more items in your collections, the bigger possibilities that you have. Some themes and plugins come with special widgets of their own. You can also find more WordPress widgets with the help of good ol’ Google. And since you can add virtually anything using the combination of the “Text” widget and light coding, the sky is the limit for your imagination.
Quick Case Study
To give you an idea of what you can do with the plugin, I tried to do a quick case study. First I changed the menu from Flyout to Mega Menu. Then I chose an existing menu with sub menus inside, deleted some of the sub menus that I don’t need, and opened the Max Mega Menu panel. I adjusted the column to match the number of submenus, and I added an image using JetPack’s image widget. To make things merrier, I also added a calendar and a social media icons widget, just because I can. Now let’s compare the before and after of our little case study. Here’s what the menu looked like before I added mega menu.
And here’s the result of my menu after the tweaking.
So what do you think about the mega menu? Is this just a temporary trend, or will it stay longer? Will you add a mega menu to your site? Share your opinion in the comments below.
