Menu icon Foundation
MegaMenu

Will there ever be support for a MegaMenu in Foundation?

mega-menumega-dropdownfeature request

Will there ever be support for a MegaMenu in Foundation?

sldavidson almost 6 years ago

Anyone know of any potential solutions using F5? Was using a hacked version of sections, but they are no longer supported...

Daniel Koskinen almost 6 years ago

Could you use dropdowns with some content? http://foundation.zurb.com/docs/components/dropdown.html

Rafi Benkual almost 6 years ago

There is no support for this on dropdown now. We will tag this as a feature request.

If anybody has a feature request, the forum is the right place. The tag is 'feature request'.

I think this is what you are describing?
http://www.designer-daily.com/mega-drop-down-navigation-menus-12796

sldavidson over 5 years ago

Merry Consumermass Rafi!

That's exactly what I'm after...

Cheers!

Sean

Mihai Tarnovan over 5 years ago

+1 I'd also very much like to see this in Foundation

Asif over 5 years ago

As per Daniel's Suggestion I tried using Drop-downs and it worked to a large extent with a few compromises. The main compromise was having 2 menu blocks for a single Mega-Menu Block ie: one block for small and medium and the other for Large. in this Implementation the mega menu would happen only for large screens and would revert back to normal top-bar functionality in medium and small screens. I know this is not a perfect solution but for now this works without hacking into any foundation code.
The Following are 2 questions I have:
1. Is there a better way to implement this? especially eliminating the need to have 2 menu blocks for each mega-menu block
2. Can we have the mega-menu block appear at the center of the screen? I want it to appear as an entire row rather than using the Foundation's Drop-down class of "Large" which would give it 800px wide. I would rather like to use Foundation's "Row" class to take the entire width. How can we achieve this?
Here is the code for my implementation:

<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Page Title</title>
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/foundation.css" />
  <link rel="stylesheet" href="css/app.css" />
  <script src="js/vendor/custom.modernizr.js"></script>
</head>
<style>
  .f-dropdown.content ul li{
    float:none;
  }
  .f-dropdown:after{
    border-style: none !important;
  }
</style>
<body>
  <div class="row">
   <!-- Header and Nav -->
   <nav class="top-bar" data-topbar>
    <ul class="title-area">
      <!-- Title Area -->
      <li class="name">
        <h1>
          <a href="#">
            Top Bar Title
          </a>
        </h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">
      <!-- Left Nav Section -->
      <ul class="left">
        <li class="divider"></li>
<li class="has-dropdown hide-for-large-up">
          <a href="#">Main Item 1</a>
          <ul class="dropdown">
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Options</a></li>
              <li><a href="#">Dropdown Options</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><a href="#">See all ?</a></li>
          </ul>
        </li>
        <li class="show-for-large-up">
          <a href="#" data-dropdown="mega-menu-1" data-options="is_hover:true">Main Item 1</a>
          <div id="mega-menu-1" data-dropdown-content class="large f-dropdown content row">
            <div class="large-6 columns">
            <ul>
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Options</a></li>
              <li><a href="#">Dropdown Options</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              </ul>
            </div>
            <div class="large-6 columns">
            <ul>
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><a href="#">See all ?</a></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="divider"></li>
        <li><a href="#">Main Item 2</a></li>
        <li class="divider"></li>
        <li class="has-dropdown hide-for-large-up">
          <a href="#">Main Item 3</a>
          <ul class="dropdown">
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Options</a></li>
              <li><a href="#">Dropdown Options</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><a href="#">See all ?</a></li>
          </ul>
        </li>
        <li class="show-for-large-up">
          <a href="#" data-dropdown="mega-menu-2" data-options="is_hover:true">Main Item 3</a>
          <div id="mega-menu-2" data-dropdown-content class="large f-dropdown content row">
            <div class="large-6 columns">
            <ul>
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Options</a></li>
              <li><a href="#">Dropdown Options</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              </ul>
            </div>
            <div class="large-6 columns">
            <ul>
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><a href="#">See all ?</a></li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="divider"></li>
          <li class="has-dropdown hide-for-large-up">
          <a href="#">Main Item 4</a>
          <ul class="dropdown">
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Options</a></li>
              <li><a href="#">Dropdown Options</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><a href="#">See all ?</a></li>
          </ul>
        </li>
        <li class="show-for-large-up">
          <a href="#" data-dropdown="mega-menu-3" data-options="is_hover:true">Main Item 4</a>
          <div id="mega-menu-3" data-dropdown-content class="large f-dropdown content row">
            <div class="large-6 columns">
            <ul>
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Options</a></li>
              <li><a href="#">Dropdown Options</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              </ul>
            </div>
            <div class="large-6 columns">
            <ul>
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><a href="#">See all ?</a></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="divider"></li>
        <li><a href="#">Main Item 5</a></li>
        <li class="divider"></li>
<li class="has-dropdown hide-for-large-up">
          <a href="#">Main Item 6</a>
          <ul class="dropdown">
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Options</a></li>
              <li><a href="#">Dropdown Options</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><a href="#">See all ?</a></li>
          </ul>
        </li>
        <li class="show-for-large-up">
          <a href="#" data-dropdown="mega-menu-4" data-options="is_hover:true">Main Item 6</a>
          <div id="mega-menu-4" data-dropdown-content class="large f-dropdown content row">
            <div class="large-6 columns">
            <ul>
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Options</a></li>
              <li><a href="#">Dropdown Options</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Subdropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              </ul>
            </div>
            <div class="large-6 columns">
            <ul>
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><a href="#">See all ?</a></li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </section>
  </nav>
  <!-- End Header and Nav -->
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/app.js"></script>
<script>
  $(document).foundation();
</script>
</body>
</html>

Rafi Benkual over 5 years ago

Took your code and made a live demo so people can see: http://cdpn.io/oepzE

Nice job!

Asif over 5 years ago

@Rafi Thank you, I shall use Codepen in future :). Hope it helps.

sldavidson over 5 years ago

Nice one Asif, really appreciated.

sldavidson over 5 years ago

Hi Asif

I've just had a fettle with your example implementation and I've reached the same conclusion as you are regards having the menu centred, does anyone else have any ideas?

Thanks in advance

Sean

sldavidson over 5 years ago

.f-dropdown.content ul li {
float: none;
}

.f-dropdown:before,
.f-dropdown:after {
border-style: none;
}

.large.f-dropdown.content.row.open.right {
border-top: none !important;
left: 0 !important;
}

.top-bar .top-bar-section li:hover > a {
color: #000;
background: #FFF !important;
}

Rafi Benkual over 5 years ago

Using Dropdown buttons

This is not a perfect solution. You will likely need to write some custom JS to position the drop down container to the parent element (button-bar).

http://cdpn.io/gHxBn (click edit pen to see code)
or
http://cdpn.io/kasyE

Using Top-bar (Foundation 5)

with help from Joe Watkins
http://cdpn.io/KkasB

Anyone can write the JS that will align the dropdowns?

sldavidson over 5 years ago

Hi there,

This is based upon Asif's contribution, so I can't claim kudos, I just added some CSS to sort out the alignment without JS and is full width:

http://cdpn.io/Jseph

Asif over 5 years ago

@sldavidson - awesome, lightweight and super.

I thought I'll quickly fix the example what Rafi had posted ( http://cdpn.io/KkasB )

Here is my take, not as elegant as @sldavidson, but a quick take with javascript. Please note that I'm no javascript guru, so there might be issues, I used animate.css as well to give a little animation to the mega-menu.

here is the link to my version :
http://blacksharkthemes.com/testing/mega-menu-test.html

I hope this helps.

Asif over 5 years ago

@sldavidson - are you working with wordpress and plan to implement the mega menu in wordpress theme? I might need some help with creating a walker with this mega menu

Daniel Reuter over 5 years ago

Are either of you available for hire to code me a mega menu? I've got the main coding of the site covered but I really don't have time to work through the particulars of making this work for my application. I would need the mega menu for large and possibly medium, with standard foundation dropdown for small/medium.

Here's a pic.
http://imgur.com/hiJHNfh

James Gehring over 5 years ago

How about something like this? http://cdpn.io/DleoC

Asif over 5 years ago

Hi,

http://cdpn.io/Dnvom

I'm not a jquery guru, just managed to get this working, I'm sure the jquery guys would make this even better.

This demo shows that this works with sticky top-bar as well.

you can even use animate.css to provide some animation easily.

Asif over 5 years ago

Hey Daniel,

let me know how I can help, send me a mail (email address in profile), I can surely help you out.

Thanks,
Asif

Niklas Koskela over 5 years ago