Mega Menus in Web Design

We recently completed a project for Organic Dyes and Pigments. The site is a fairly large site in terms of content and levels of navigation. One of the ideas that was discussed and ultimately implemented was the use of mega menus.

Mega menus are menus that upon mouse rollover, display more than 5 items on one level. These menus are also structured in such a manner that the menu items are displayed in multiple columns, which is in contrast to the traditional one column menu used on a standard drop down.

Mega menus are typically seen in product based type of websites, examples being large ecommerce sites. In the example of Organic Dyes and Pigments, the logic for implementation was the large amount of products that the company offers. Further, the products that are offered are catagorized in a wide range of options.

The mega menus were used twice in the sites navigation. The first instance is located under “Industries” and the second is located under “Dyes”. In the instance of the “Industries” category, we broke down the specific products and how they were applied to specific industries that Organic Dyes and Pigemnts serves. In the example of “Dyes” we broke them down to uses that could be applied across multiple industry types.

Mega menus ultimently are a good solution to provide when dealing with large sets of data. They are able to easily represent large amounts of options to an end user, in a clean, easy to follow format. Mega Menus also provide the “one click” solution that is always desired in the web development industry.

The use of mega menus on mobile typically come down a “flyout menu” option, or as we implemented on this project, a parent category only option, that then breaks down the second level on a single page. The pros to this solution in mobile are its readability and organization. The cons to this solution are ultimenetly that it requires 2 clicks for the end user to get to their content of choice. At the end of the day, based on the amount of data we were dealing with, it was deceided that a flyout menu in 2 tiers was simply too much scrolling for anyone on a phone.