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基金会的顶栏下拉消失在小屏幕上

回答

相关问题