1

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.

4

4 回答 4

5

这会将您的顶栏子菜单重置为顶栏宽度的 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;
                    }
                }
            }
        }
    }
}
于 2013-04-08T14:51:03.077 回答
1

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

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

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

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

于 2013-02-05T10:50:30.053 回答
0

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

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

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

.open {left: 0 !important;}
于 2014-04-21T21:02:54.940 回答
-3

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

创建与 Mashable 站点相同的功能超出了 Foundation 的范围，需要您自己开发。问题是恕我直言，不适合在 Stack Overflow 中回答。

于 2013-02-04T14:14:04.857 回答