Building a Responsive Mega Menu with Foundation

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.

Continue reading this article on SitePoint

Awesome article George. There are some very interesting things you can do by mixing up Foundation 5 components. I would love that this article was available a few months ago when I had to make exactly what you did (http://www.getintenso.com/demo/default)

Thanks Daniel! I agree, Foundation is a very interesting and powerful framework. I saw your mega menu, it’s nice! Also, I like your theme!!

Hey, great article. I was wondering about your perspective on page load times. I’ve just implemented a mega menu as part of an update to the eCommerce site for the company I work for and it seems to be working brilliantly in addition to some of the design changes we’ve implemented. I am concerned about loading all of this content up front and the possible effects of SEO regarding internal linking and am considering loading the content via AJAX. I’m having a difficult time finding any information on whether or not this is a good idea and was hoping you could lend your perspective or might have a good article to point to. Thanks.

Hi @Ian_Woodward,

Thanks for your message! I agree that AJAX is a good option, especially if your menu contains a lot of media such as images or videos.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.