Zurb Foundation 顶部栏下拉菜单在小屏幕上消失答案

【问题标题】：Zurb Foundation topbar dropdown disappears on small screensZurb Foundation 顶部栏下拉菜单在小屏幕上消失
【发布时间】：2015-06-22 13:32:14
【问题描述】：

这很麻烦，因为我想要一个顶栏的唯一原因是为了更小的屏幕。下拉菜单在中型和大型中都可以正常工作，但在较小的屏幕上会消失。我读过它需要在一个 12 宽的列内，但这似乎没有帮助。它实际上引入了另一个（小）问题，栏不再填满屏幕的宽度。下拉列表只有4个字符，怎么会太大？我在这里错过了什么？

<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>

大：

小：

【问题讨论】：

你检查过元素吗？通常基金会会在那里插入一个汉堡菜单
没有汉堡菜单，但那会很好。我在找什么？下拉菜单看起来像是在顶栏下方，但不可见或不可点击。
嗯，必须有一些东西。它很可能使它在平板电脑屏幕上不显示。如果您不想要边距，请使用行折叠类
您能否提供一个在线示例或链接到您的作品。帮助/检查会更容易。

标签： css responsive-design zurb-foundation navigationbar

【解决方案1】：

它仍然需要一些调整，但我已修复它。我加了

style="display: none;"

到

<ul class="title-area">

看起来他们都试图占据同一个空间。

【讨论】：

【解决方案2】：

我读过它需要在一个 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。我希望应该不会太难应付。

【讨论】：

感谢 Elyasin，但我在上面解决了这个问题，我只是无法将其标记为已接受。实际上，我最终做出了您提到的所有更改（链接除外，因为这只是概念证明）。将它放在 12 宽的列内部或外部都没有效果。真正的解决方法是将 ul #title-area 设置为 display: none;
那么你必须接受另一个答案，因为这解决了你的问题。如果对你有用，请点赞。
我赞成你的。这很有帮助，但不是答案，只是我需要做的事情。
我知道，我明白了。不过，您应该接受自己的答案。让人们知道它已经解决了。（您也会因此获得徽章。）鼓励您实际这样做。
我需要等待 2 天才能接受我自己的答案。

【解决方案3】：

还注意到您缺少移动菜单图标。

应该是title-area中的一个li

     <!-- 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>

【讨论】：