CODEWITHSUNDEEP
cssdrop-down-menuzurb-foundation
J W
J W

Reputation: 2861

How to Make ZURB Foundation Top-Bar Dropdown Menu 100% Width?

Did some searching but only found info for the megaBar. Would like to have 100% width dropdown widths and implement it with as little css/js on top of Foundation as possible.

I'd like to do a sub menu (ul > li.has-dropdown -> ul.dropdown) that is 100% window width similar to the one on Mashable and shows on hover. The Foundation megaBar is outside of the nested nav structure but that's not what I'd like for my Wordpress template (want to stay in the nested walker type menu tree).

If you hover over any of the top menu links on Mashable, you'll see the dropdown submenu I'd like to copy (just the structure, not the content).

Mashable top menu with dropdown

I'm using Foundation 3.2 and have the <div class="contain-to-grid fixed"><nav class="top-bar"> setup so that it is fixed to the top and always 100% window width while the top-bar has a max-width: 1440px, just like the Mashable site.

Now I just need the dropdown (sub menu) part sussed out.

Upvotes: 1

Views: 13726

Answers (4)

MsMaryMak
MsMaryMak

Reputation: 362

I searched everywhere for an easy answer to making the drop down mega menu 100% of the container and found it here:

http://codepen.io/sldavidson/full/Jseph

The one essential style was this:

.open {left: 0 !important;}

Upvotes: 0

321zeno
321zeno

Reputation: 1274

This will reset your top bar submenu to be 100% of your top bar's width and will organise your submenu items in responsive columns, just as a flyout content but still preserving the navigation behavior on the small screen size 

@media only screen and (min-width: $screenSmall) {

    nav.top-bar > section > ul > li.has-dropdown{
        position: static;
        & > .dropdown{
            @include outerRow();

            & > li.has-dropdown{
                @include column(3);
                min-width: auto;

                .dropdown{
                    @include outerRow();
                    position: static;
                    visibility: inherit;
                    top: auto !important;
                    left: auto !important;
                    padding: 0;
                    min-width: auto;
                    li{
                        @include column(12);
                         min-width: auto;
                    }
                }
            }
        }
    }
}

Upvotes: 5

user2002847
user2002847

Reputation:

Foundation does come with the functionality for a dropdown menu, so you could replicate the type of navigation used by Mashable with the Foundation framework.

If you read the documentation: http://foundation.zurb.com/docs/navigation.php

You'll see that in the Nav Bar example, Nav Item 4 has a dropdown with its own rows/columns. As per the docs, "You can also have dropdowns with a specific size which can contain any kind of content, including rows and columns."

You should be able to specify the size of the dropdown so that it spans the page, by using CSS to alter the size of the flyout class.

Upvotes: 1

Naoise Golden
Naoise Golden

Reputation: 8893

This UI component is not part of Foundation (see Foundation Components). As you already mention, the dropdown menu is limited to showing nested menu elements.

Creating the same functionality as in the Mashable site is out of the scope of Foundation and will involve developing it by your own. The question is IMHO not suitable to be answered in Stack Overflow.

Upvotes: -3

Related Questions