如何使 ZURB Foundation 顶部栏下拉菜单 100% 宽度？

Question

进行了一些搜索，但只找到了 megaBar 的信息。希望拥有 100% 宽度的下拉宽度，并在 Foundation 上使用尽可能少的 css/js 来实现它。

我想做一个 100% 窗口宽度的子菜单 (ul > li.has-dropdown -> ul.dropdown)，类似于 Mashable 上的窗口宽度并在悬停时显示。 Foundation megaBar 位于嵌套导航结构之外，但这不是我想要的 Wordpress 模板（希望保留在嵌套的 walker 类型菜单树中）。

如果您将鼠标悬停在 Mashable 上的任何顶部菜单链接上，您会看到我要复制的下拉子菜单（只是结构，而不是内容）。

我使用的是 Foundation 3.2 并设置了 <div class="contain-to-grid fixed"><nav class="top-bar">，因此它固定在顶部并始终为 100% 窗口宽度，而顶部栏具有 max-width: 1440px，就像 Mashable 网站一样。

现在我只需要解决下拉（子菜单）部分。

Answer 1

这会将您的顶栏子菜单重置为顶栏宽度的 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;
                    }
                }
            }
        }
    }
}

Answer 2

Foundation 确实带有下拉菜单功能，因此您可以将 Mashable 使用的导航类型复制到 Foundation 框架中。

如果您阅读文档： http://foundation.zurb.com/docs/navigation.php

您会在导航栏示例中看到，导航项 4 有一个带有自己的行/列的下拉菜单。根据文档，“您还可以使用特定大小的下拉菜单，其中可以包含任何类型的内容，包括行和列。”

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

Answer 3

我到处搜索了一个简单的答案，让下拉大型菜单 100% 成为容器，并在这里找到它：

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

一种基本的风格是这样的：

.open {left: 0 !important;}

Answer 4

此 UI 组件不是 Foundation 的一部分（请参阅 Foundation Components）。正如您已经提到的，dropdown menu 仅限于显示嵌套菜单元素。

创建与 Mashable 站点相同的功能超出了 Foundation 的范围，需要您自己开发。问题是恕我直言not suitable to be answered in Stack Overflow。