Zurb基金會的頂欄下拉消失在小屏幕上

這很麻煩，因爲我想要一個頂欄的唯一原因是用於較小的屏幕。下拉菜單在大中型網站中運行良好，但在較小的屏幕上消失。我讀過它需要在12寬度列內，但這似乎沒有幫助。它實際上引入了另一個（次要）問題，即該欄不再填充屏幕的寬度。下拉菜單隻有4個字符，它怎麼會太大？我在這裏錯過了什麼？Zurb基金會的頂欄下拉消失在小屏幕上

<div class="row"> 
<div class="fixed small-12 medium-12 large-12 column"> 
<nav class="top-bar" style="color: white;" data-options="is_hover:false" data-topbar=""> 
    <ul class="title-area"> 
    <li class="name"></li> 
    </ul> 
    <section class="top-bar-section"> 
    <ul class="left"> 
     <li class="has-dropdown"> 
     <a href="#">Menu</a> 
     <ul class="dropdown"> 
      <li>Test</li> 
      <li>Test</li> 
      <li>Test</li> 
     </ul> 
     </li> 
    </ul> 
    </section> 
</nav> 
</div> 
</div>

大： large

小： small

來源

2015-06-21 thekthuser

你檢查元素的禮？通常基礎插入那裏漢堡菜單 –

沒有漢堡菜單，但那將是好的。我在找什麼？下拉菜單看起來像是在頂欄下方，但不可見或可點擊。 – thekthuser

好的東西必須在那裏。它最有可能使它在平板電腦屏幕上不顯示任何內容。如果您不需要邊距，請使用行摺疊類 –

它仍然需要一些調整，但我固定它。我加

style="display: none;"

到

<ul class="title-area">

看起來他們都試圖佔據同一空間。

來源

2015-06-21 16:12:07 thekthuser

我讀過它需要一個12寬列內...

我真的不認爲這是正確的;這是你引入問題的原因。

其實我會改變

<div class="fixed small-12 medium-12 large-12 column">

到

<div class="fixed">

如果想讓它顯示爲小屏幕只有那麼你可以做這樣的

<div class="fixed show-for-small-only">

也不要忘記根據documentation（位於頁面最底部）重新初始化或重新應用聽衆。

$(document).foundation();

和

$(document).foundation('topbar', 'reflow');

還要注意列表項應包含的鏈接。更改

<li>Test</li> 
    <li>Test</li> 
    <li>Test</li>

到

<li><a href="#">Test</a></li> 
    <li><a href="#">Test</a></li> 
    <li><a href="#">Test</a></li>

這是不完全一樣，但也許有幫助。我用中型和大型屏幕頂部酒吧，我使用小型屏幕的標籤欄。

你可以在我的website上找到靈感。 隨時檢查它。它也在GitHub。

它基於Zurb-Foundation 5 documentation。應對我希望不應該太難。

來源

2015-06-21 17:17:43 Elyasin

謝謝Elyasin，但我解決了上述問題，我只是無法將其標記爲已接受。我實際上最終做出了你提到的所有更改（鏈接除外，因爲這僅僅是一個概念證明）。將它放在12寬度列內部或外部不起作用。真正的修復是設置ul＃標題區域顯示：無; – thekthuser

然後你必須接受其他答案，因爲這解決了你的問題。如果它對你有用，請把我的電子郵件通知我。 – Elyasin

我把你的upvoted。這很有幫助，但這不是答案，只是我需要做的東西。 – thekthuser

也注意到你錯過了移動菜單圖標。

應該在標題區

 <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>

來源

2015-06-22 05:32:14 rafibomb

Zurb基金會的頂欄下拉消失在小屏幕上

回答

相關問題