Menu icon Foundation
F6 and Mega Menus

I hope someone can offer guidance about mega menus with F6 that has halted my development.

With F5, I successfully created a mega-menu using this Zurb U article as a template: https://zurb.com/university/lessons/nav-components-part-1-design-advanced-navigation-with-mega-menus

With F6, this functionality appears to break.

One cause I see is the 'mega' class, assigned to the dropdown div, is gone in F6. In F5, there are hooks for it in /components/_dropdown.scss:

&.tiny { max-width: 200px; }
&.small { max-width: 300px; }
&.medium { max-width: 500px; }
&.large { max-width: 800px; }
&.mega {
width:100%!important;
max-width:100%!important;

While in F6, medium and mega are gone:

$dropdown-sizes: (
tiny: 100px,
small: 200px,
large: 400px,
) !default;

Additionally, the 'content' class for dropdown items are gone from F6. Here is the 'content' class as described in the F5 docs: http://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown.html

Has anyone been able to create mega-style menus with F6, or is there another method that is better suited to the updated framework?

foundation 6dropdownmega-menutop-bar

I hope someone can offer guidance about mega menus with F6 that has halted my development.

With F5, I successfully created a mega-menu using this Zurb U article as a template: https://zurb.com/university/lessons/nav-components-part-1-design-advanced-navigation-with-mega-menus

With F6, this functionality appears to break.

One cause I see is the 'mega' class, assigned to the dropdown div, is gone in F6. In F5, there are hooks for it in /components/_dropdown.scss:

&.tiny { max-width: 200px; }
&.small { max-width: 300px; }
&.medium { max-width: 500px; }
&.large { max-width: 800px; }
&.mega {
width:100%!important;
max-width:100%!important;

While in F6, medium and mega are gone:

$dropdown-sizes: (
tiny: 100px,
small: 200px,
large: 400px,
) !default;

Additionally, the 'content' class for dropdown items are gone from F6. Here is the 'content' class as described in the F5 docs: http://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown.html

Has anyone been able to create mega-style menus with F6, or is there another method that is better suited to the updated framework?

This post has been closed. No new replies can be added.

Tom Dean almost 4 years ago

I really hope they update that Zurb U article at some point. I know you don't want to hear it but if you're in a pinch you could use another solution for your nav. Something like here: http://2016d3start.businesscatalyst.com/ the menu I am using is called smart menus...super flexible and many options.

Alex Laforge almost 4 years ago

A lot of things have disappeared, like the ability for a dropdown menu or panel to be hidden when clicking outside of it .. :-/ That's such a pain

Aaron Marbet almost 4 years ago

Agree! I found that one out as well while trying a hacky solution to my original post. Very frustrating.

Rafi Benkual almost 4 years ago

@Alex Laforge there is a setting for closeOnClick Allows a click on the body to close the dropdown.

Is this what you're looking for? If so, it may have been added in a recent release as we are always making updates.

If not, it would be awesome if you could make sure it;s not already reported on GitHub so that someone has an opportunity to add it!

Rafi Benkual almost 4 years ago

@Aaron Marbet I think suggesting the .mega be added as a feature request on GitHub is a good idea! I would support you on that! You could also submit a Pull Request to add it in.

Ercan Murat KISACA over 3 years ago

I just added a "Dropdown" container into the Topbar menu to perform a mega menu.
It works very very well
Do not forget to set hover and hoverpane to true.

Sample code is here:

      <div class="top-bar">
        <div class="top-bar-left">
          <ul class="dropdown menu" data-dropdown-menu>
            <li><a href="#" class="dropdown" data-toggle="balonlar">Balon ve Folyo Balon</a>
                    <div class="dropdown-pane" id="balonlar" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true">
                      <p>Balon içerik</p>
                    </div>
            </li>


Julie Lewis over 3 years ago

@Ercan Murat KISACA

What version are you using?

This does not work for me at all.

Ercan Murat KISACA over 3 years ago

@Julie Lewis I am using 6th release (6.1.1)

Rafi Benkual over 3 years ago

@Ercan Murat KISACA Is using a regular dropdown instead of the dropdown menu. You can add some CSS to make the dropdown width: 100%;

http://codepen.io/rafibomb/pen/MKVGPV

Julie Lewis over 3 years ago

Don't you have to use a button for a dropdown pane?

I think that's what was confusing me.

I went ahead and re-did the nav using buttons and the drop down pane and it looks great.

But now the pane doesn't stay open when I move my mouse.

I have:

   <nav class="show-for-medium">
    <div class="row align-center">
        <div class="shrink columns">
            <button class="button dropdown" type="button" data-toggle="programs">Programs</button>
               <div class="dropdown-pane" id="programs" data-dropdown data-hover="true"   
                                    options="closeOnClick:true; hover: true; hoverPane: true">
                   <div class="row">
                       <div class="columns">blah
                       </div>
                      <div class="columns">blah
                      </div>
                   <div class="columns"> blah
                   </div>
                </div><!-- end row of a bunch of links -->

           </div><!-- end dropdown pane -->
        </div><!--end shrink -->
        </div><!-- end nav row -->
        </nav>

options="closeOnClick:true; hover: true; hoverPane: true"

doesn't work on the pen link either.

Removing the hover option makes the pane flash open on click and then close again.

Ercan Murat KISACA over 3 years ago

I am working on an e-commerce project right now.
I will use these kind of navigations.
www.erfim.net/elitparti

As @Rafi Benkual mentioned, you can set width:100% to dropdown-pane as I did on Parti Malzemeleri menu item here: www.erfim.net/elitparti/index2.html (Look to the menu item Parti Malzemeleri. )
I added these css too to make it centered.
CSS
.top-bar .dropdown-pane {
width: 100%;
max-width: 85.71429rem;
margin: 0 auto !important;
left: 0% !important;
right: 0% !important;
}

Julie Lewis over 3 years ago

Hi Rafi,

What I want is a mega dropdown for medium-up, then an off-canvas menu of just the top links for mobile.

(The level 2 page is basically the same as the mega dropdown for that section with a scroller and some other extra cruft so hopefully we won't need a complex drill-down function for mobile.)

I'm really close to having this working - the only problem is that the dropdown panes aren't staying open, either in toggle or hover mode.

I tried adding

   options="closeOnClick:true; hover: true; hoverPane: true"

to the panel and it doesn't do anything. I tried it on your pen too and it doesn't work there either.

Julie Lewis over 3 years ago

OK the problem was that I was using an old version of the javascript. Now it's working great!

Thank Rafi and Ercan!