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

Question

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

我想做一个子菜单（ul＆gt; li.has-dropdown - ＆gt; ul.dropdown），它是100％窗口宽度，类似于Mashable上的窗口宽度，并在悬停时显示。基金会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提供了下拉菜单的功能，因此您可以使用Foundation框架复制Mashable使用的导航类型。

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

您会看到，在Nav Bar示例中，Nav Item 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。