They're big. They're popular. They're pains to deal with. They're mega menus, and today we're going to take some of the sting out of the code required to run them.

Most drop-down navigation components are, well, drop-down lists. Design is what puts the "mega" into a menu. But with customization comes a certain overhead that, luckily, we can show you how to craft. In the first part of our series on building navigation components for many kinds of browsers and devices, here's how to build a desktop-friendly mega menu with Foundation.

1. Know what you're going to build

Let's back up and look at a real mega menu. Sliderobes.com lets customers browse the entire site, with visually-pleasing thumbnails and more:

 

You need to know what you're going to build before you build it. For this lesson we'll create a dropdown that has art on one side and options on the other. 

First we'll outline the whole component. Then we'll add the buttons that make different parts appear. Finally we'll add and style the content itself.

2. Create a container

The container, in this case, is a pair of <nav> tags that will hold the entire navigation component. Inside those tags we create a single Foundation row and a pair of divs.

<nav class="mega-menu">
<div class="row collapse">
  <div class="medium-3 columns">
    <img src="assets/img/duality.png" alt="company logo">
  </div>
  <div class="medium-7 columns">
  </div>
</div>

Notice that we're already making the menu something special. Custom design is the essence of a mega menu, after all.

3. Make it drop-downable

We use a button group, which aligns elements well, to line up items on the right. Adding a class of "even-3" makes the buttons fill the seven-column container.

<nav class="mega-menu">
<div class="row collapse">
  <div class="medium-3 columns">
    <img src="assets/img/duality.png" alt="company logo">
  </div>
  <div class="medium-7 columns">
    <ul class="button-group even-3">
      <li><a
        href="#"
        class="button"
        data-dropdown="living"
        data-options="is_hover:true; hover_timeout:500">
        Living Room Furniture</a></li>
      <li><a
        href="#"
        class="button"
        data-dropdown="bedroom"
        data-options="is_hover:true; hover_timeout:500">
        Bedroom Room Furniture</a></li>
      <li><a
        href="#"
        class="button"
        data-dropdown="storage"
        data-options="is_hover:true; hover_timeout:500">
        Storage<br>Furniture</a></li>
    </ul>
  </div>
</div>

Astute readers will notice that 3 + 7 columns isn't 12. That's because the last block in a Foundation for Sites row will always float to the far right — and we want that gap in this design.

Time to make it work. "Triggers" are HTML elements that, when hovered over, cause something else to happen — like the appropriate mega menu to appear. The code is straightforward:

<a href="#" data-dropdown="living" data-options="is_hover:true; hover_timeout:500">

The code is-hover: true makes a menu open on button hover. Data-dropdown tells browsers that this will trigger a particular nav element, in this case "living." Timeout is how long the menu stays open after the mouse leaves the dropdown. We've found that not having menus vanish from errant mouse movements is a smoother user experience.

Each designed menu component gets its own unique trigger. Mousing over each trigger in turn will activate the appropriate mega. (Can "mega" be a noun? Apparently noun-ifying adjectives is a thing. For the next few minutes we'll let it slide.)

Next we'll add the mega's dropdown content. 

4. Add the content

Each mega has different sections that appear as you hover over the mega's triggers. The sections' wrappers are simple:

<div data-dropdown-content id="living" class="f-dropdown content mega"> … </div>

Let's dissect that.

• data-dropdown-content — This declares that the div will hold information that only appears when users hover over a given trigger.
• id="living" — The given trigger mentioned above must have a unique ID. More on that in a moment.
• class="f-dropdown mega" — A Foundation class that makes its element 100% width.

Which trigger activates what content? Both the trigger's data-dropdown attribute and the content's ID attribute must match.

<a href="#" data-dropdown="living" data-options="is_hover:true; hover_timeout:500">

…

<div data-dropdown-content id="living" class="f-dropdown content mega"> … </div>

Within that data-dropdown-content div you can arrange entire Foundation grid sets with whatever content you please. Handy tip: Want the menu to fit the grid that contains the parent menu exactly? Just wrap all your mega contents a grid row and columns.

Wrap up

To recap:

1. Mega menus let you trick out drop-down menus with content, layout, and even images.
2. Each mega has triggers and content blocks.
3. Content blocks' IDs must match their triggers' data attributes.
4. Using "mega" as a noun is questionable English at best.

And that's part one. Check out the full example at https://gist.github.com/rafibomb/f08ed757b04a782aa5ea. Next, we'll make the mobile off-canvas menu and later, we'll put it all together with Interchange.

---