Menu icon Foundation
Regarding F6 Mega Menus using .dropdown-pane

Ercan Murat and Rafi were graciously helping me with this and the post was deleted. sigh.

I thought you could only use the dropdown-pane with buttons - that's what the docs imply.

I did get a mega-menu dropdown working using buttons, but the pane doesn't stay open.

(See code for the "Programs" button)

If I set it up to toggle, it just bounces open and closed again.
(See code for the "Taxes" button.)

<nav class="show-for-medium">
    <div class="row align-center">
        <div class="shrink columns"> <a class="button" href="/">
            Home
            </a> </div>
        <div class="shrink  columns"> 
            <button class="button dropdown" type="button" data-toggle="taxes">Taxes</button>
            
            <div class="dropdown-pane" id="taxes" data-dropdown>
                <div class="row">
                    <div class="columns">
                        <ul class="no-bullet">
                            <li><strong>Taxes Home</strong></li>
                            ...
                                    <li>Tax Forms</li>
                                </ul>
                            
                    </div>
                </div>
            </div>
        </div>
        
        <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">
                
                    <p><strong><a href="/programs/unclaimed-property/">Unclaimed Property</a></strong>
                    </p>
                    <ul class="no-bullet">
                        stuff
                </div>
                <div class="columns">
                     stuff
                </div>
                <div class="columns">
                  
                   stuff
                </div>
         
               
    </div>
    </div>
    <div class="shrink columns">
        <button class="button dropdown" type="button" data-toggle="about">About</button>
        <div class="dropdown-pane" id="about" data-dropdown data-hover="true"> Just some junk that needs to be said. Or not. Your choice. </div>
    </div>
    </div>
</nav>

Rafi provided a pen - but hoverPane:true didn't work on that either.

If the javascript wasn't included properly, it wouldn't be working at all and I don't think the css would have anything to do with the failure either.

foundation 6dropdownmega menu

Ercan Murat and Rafi were graciously helping me with this and the post was deleted. sigh.

I thought you could only use the dropdown-pane with buttons - that's what the docs imply.

I did get a mega-menu dropdown working using buttons, but the pane doesn't stay open.

(See code for the "Programs" button)

If I set it up to toggle, it just bounces open and closed again.
(See code for the "Taxes" button.)

<nav class="show-for-medium">
    <div class="row align-center">
        <div class="shrink columns"> <a class="button" href="/">
            Home
            </a> </div>
        <div class="shrink  columns"> 
            <button class="button dropdown" type="button" data-toggle="taxes">Taxes</button>
            
            <div class="dropdown-pane" id="taxes" data-dropdown>
                <div class="row">
                    <div class="columns">
                        <ul class="no-bullet">
                            <li><strong>Taxes Home</strong></li>
                            ...
                                    <li>Tax Forms</li>
                                </ul>
                            
                    </div>
                </div>
            </div>
        </div>
        
        <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">
                
                    <p><strong><a href="/programs/unclaimed-property/">Unclaimed Property</a></strong>
                    </p>
                    <ul class="no-bullet">
                        stuff
                </div>
                <div class="columns">
                     stuff
                </div>
                <div class="columns">
                  
                   stuff
                </div>
         
               
    </div>
    </div>
    <div class="shrink columns">
        <button class="button dropdown" type="button" data-toggle="about">About</button>
        <div class="dropdown-pane" id="about" data-dropdown data-hover="true"> Just some junk that needs to be said. Or not. Your choice. </div>
    </div>
    </div>
</nav>

Rafi provided a pen - but hoverPane:true didn't work on that either.

If the javascript wasn't included properly, it wouldn't be working at all and I don't think the css would have anything to do with the failure either.

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

Rafi Benkual over 3 years ago

Hi Julie, what are you trying to build with this? If we know your end goal we can make better suggestions to get there!

Rafi Benkual over 3 years ago

I think this is the post you referenced http://foundation.zurb.com/forum/posts/36800-f6-and-mega-menus

Probably better to keep the conversation in one place. Thanks!