Question

我目前正在与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>

Answer 1

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

然后是可以通过移动设备查看的那个，你内部没有数据。

将<a class="left-off-canvas-toggle menu-icon"> <span>Title</span> </a>添加到其他导航栏。

请参阅this page here以获得正确的响应式上边栏。

Topbar不显示响应式菜单 - 基础5

1 个答案: