如何使ZURB基金會頂欄下拉菜單100％寬？

Question

做了一些搜索，但只發現了megaBar的信息。想要有100％寬度的下拉寬度，並儘可能在基礎之上用盡可能小的css/js來實現它。

我想做一個子菜單（ul> li.has-dropdown - > ul.dropdown），它的窗口寬度與Mashable上的窗口寬度相似，並在懸停時顯示。 Foundation megaBar不在嵌套的導航結構之外，但這不是我想要的Wordpress模板（想要保留在嵌套的walker類型菜單樹中）。

如果您將鼠標懸停在Mashable上的任何頂級菜單鏈接上，您會看到我想要複製的下拉菜單（僅顯示結構，而不是內容）。

我使用基金會3.2，並有<div class="contain-to-grid fixed"><nav class="top-bar">設置，使得在頂部欄有一個max-width: 1440px，就像混搭網站它固定在頂部和始終爲100％窗口寬度。

現在我只需要下拉菜單（子菜單）部分就可以了。

Answer 1

此UI組件不是Foundation的一部分（請參閱Foundation Components）。正如您已經提到的，dropdown menu僅限於顯示嵌套的菜單元素。

創建與Mashable站點相同的功能超出了Foundation的範圍，並且將涉及您自己開發它。問題是恕我直言not suitable to be answered in Stack Overflow。

Answer 2

Foundation具有下拉菜單的功能，因此您可以使用Foundation框架複製Mashable使用的導航類型。

如果你閱讀文檔： http://foundation.zurb.com/docs/navigation.php

你會看到，在導航欄例如，導航第4項有其自己的行/列的下拉列表。根據文檔，「您也可以使用特定大小的下拉列表，其中可以包含任何類型的內容，包括行和列。」

您應該能夠通過使用CSS來更改彈出類的大小來指定下拉的大小，以便跨越頁面。

Answer 3

這將重置您的頂欄子菜單是你的頂欄的寬度的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 4

我到處去尋找一個簡單的答案使下拉菜單大型容器的100％，並在這裏找到：

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

的一個重要的風格是這樣的：

.open {left: 0 !important;}