顶部栏不显示响应式菜单 - 基础 5答案

【问题标题】：Topbar not displaying responsive menu - foundation 5顶部栏不显示响应式菜单 - 基础 5
【发布时间】：2014-01-16 15:49:51
【问题描述】：

我目前正在与foundation 5 合作，并最终尝试使我的页面适合移动设备。我根据一些基本结构为页面创建了一个顶部导航栏。导航栏有响应问题。当我将屏幕缩小时，它根本不显示菜单。如何让导航栏响应？

HTML：

<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon">
<span>Title</span>
</a>
</nav>

<nav class="top-bar docs-bar hide-for-small" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
<a href="#">Title</a>
</h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
 <li class="has-dropdown not-click">
    <a class="" href="#">Test</a>
    <ul class="dropdown">
    <li>
    <a href="#">SubTest</a>
    </li>
    </ul>
 </li>
 <li class="divider"></li>
 <li class="has-dropdown not-click">
    <a class="" href="#">Test2</a>
    <ul class="dropdown">
    <li>
    <a href="#">SubTest2</a>
    </li>
    </ul>
 </li>
<li class="divider"></li>
 <li class="has-dropdown not-click">
    <a class="" href="#">Test3</a>
    <ul class="dropdown">
    <li>
    <a href="#">SubTest3</a>
    </li>
    </ul>
 </li>
 </ul>
</section>
</nav>

【问题讨论】：

标签： html css zurb-foundation

【解决方案1】：

你已经为它提供了 .hide-for-small 类作为包含所有下拉列表的主要类。

然后是手机可以查看的，里面没有数据。

将<a class="left-off-canvas-toggle menu-icon"> <span>Title</span> </a> 添加到另一个导航中。

请参阅this page here 以获得适当的响应式顶栏。

【讨论】：