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

Question

这很麻烦，因为我想要顶部栏的唯一原因是为了较小的屏幕。下拉菜单在中型和大型屏幕上工作正常，但在较小的屏幕上消失了。我读过它需要在 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>

大：

小：

Answer 1

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

style="display: none;"

至

<ul class="title-area">

看起来他们都想占据同一个space。

Answer 2

I've read it needs to be inside a 12-width column...

我真的不认为这是对的；这就是您介绍的问题的原因。

其实我会改变

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

虽然不完全相同，但可能有所帮助。中大屏我用top-bar，小屏我用tab-bar

你可以在我的 website. Feel free to inspect it. It's also on GitHub 上找到灵感。

它基于Zurb-Foundation 5 documentation。我希望应该不会太难应付。

Answer 3

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

应该是李在title-area

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

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

Zurb Foundation topbar dropdown disappears on small screens

css

navigationbar

responsive-design

zurb-foundation