Originally published at: http://www.sitepoint.com/building-responsive-mega-menu-foundation/
Mega menus are a design trend often used on large sites such as e-commerce and educational sites. For example, eBay’s mega menu:
But what exactly is a mega menu? Well, let’s see how Jakob Nielsen describes it:
A mega menu (a big, 2-dimensional drop-down panel) groups navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users’ choices.
So, with that in mind, this article aims to help you understand how to build a simple responsive mega menu with Foundation. We’ll go step by step and construct a fully functional version of it. And take note that Foundation doesn’t support mega menus, but we’ll do our best to implement an easy-to-use solution based on its predefined styles. For more advanced and effective customizations, be sure to check/modify the corresponding Sass files.
If you’d like to jump ahead, the final demo is located here.
Building the Main Menu
Before jumping into the process of creating our custom mega menu, let’s first build the main menu itself (i.e. the “topbar”). The following screenshot gives you an idea of how it will look:
As you can see, nothing fancy happening here. We just construct the menu by taking advantage of the basic code for the topbar component that Foundation provides us. In the upcoming sections, we’ll create a mega menu for two different items in the main menu: the “Programs” menu item and the “Studies” item. In fact, we’ll build two variations of this menu.