如何使ZURB Foundation Top-Bar下拉菜单100％宽度？

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.

做了一些搜索但只找到了megaBar的信息。想要有100%的宽度下拉宽度,并尽可能在基础之上使用尽可能少的css / js来实现它。

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).

我想做一个子菜单(ul> li.has-dropdown - > ul.dropdown),它是100%的窗口宽度,类似于Mashable上的窗口宽度,并在悬停时显示。基金会megaBar不在嵌套的导航结构中,但这不是我想要的Wordpress模板(想要留在嵌套的walker类型菜单树中)。

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上的任何*菜单链接上,您将看到我想要复制的下拉子菜单(只是结构,而不是内容)。

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.

我正在使用Foundation 3.2,并且

设置,以便它固定在顶部,始终是100%窗口宽度,而顶部-bar的最大宽度:1440px,就像Mashable网站一样。

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

现在我只需要下拉(子菜单)部分就可以了。

4 个解决方案

#1

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

这会将顶栏子菜单重置为顶栏宽度的100%,并将在响应列中整理子菜单项,就像弹出内容一样,但仍保留小屏幕尺寸的导航行为

@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;
                    }
                }
            }
        }
    }
}

#2

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.

Foundation提供了下拉菜单的功能,因此您可以使用Foundation框架复制Mashable使用的导航类型。

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

如果您阅读文档: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."

您将看到在Nav Bar示例中,Nav Item 4有一个带有自己的行/列的下拉列表。根据文档,“您还可以使用特定大小的下拉列表,其中包含任何类型的内容,包括行和列。”

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.

您应该能够通过使用CSS来更改弹出类的大小来指定下拉列表的大小以使其跨越页面。

#3

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

我到处寻找一个简单的答案,让100%的容器下载超级菜单,并在这里找到它:

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

The one essential style was this:

一个基本的风格是这样的:

.open {left: 0 !important;}

#4

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.

此UI组件不是Foundation的一部分(请参阅Foundation Components)。正如您已经提到的,下拉菜单仅限于显示嵌套的菜单元素。

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.

创建与Mashable网站相同的功能超出了Foundation的范围,并且将涉及自己开发它。问题是恕我直言,不适合在Stack Overflow中回答。