Foundation 5-顶部菜单图标不可见

Question

我正在使用最新版本的Foundation 5 SASS制作网站（几天前从https://github.com/zurb/bower-foundation下载）。

当我创建一个顶部栏时，在移动/小屏幕上，菜单图标（3条水平线）不会出现，只有“MENU”文本。

这是我的代码：

<div class="contain-to-grid">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>

<section class="top-bar-section">
<ul class="left">
<li><a href="/">HOME</a></li>
<li class="has-dropdown">
<a href="#">ROOMS &amp; FACILITIES</a>
<ul class="dropdown">
<li><a href="#">FIRST</a></li>
<li><a href="#">SECOND</a></li>
<li><a href="#">THIRD</a></li>
</ul>
</li>
<li><a href="/">PRICES</a></li>
<li><a href="/">THINGS TO DO</a></li>
<li><a href="/">CONTACT</a></li>
</ul>

<ul class="right">
<li class="show-for-medium-up"><a href="http://foundation.zurb.com/docs" class="top-bar-availability"><i class="fi-calendar calendar-icon"></i> CHECK AVAILABILITY</a></li>
</ul>
</section>
</nav>
</div>

非常感谢您的帮助。我已经仔细查看了，但没有找到解决方案。大部分问题似乎是因为人们忘记在菜单文本周围添加span标签。谢谢。

- Craig

---

确保您引用了所有库，那么就没问题了。 http://cdnjs.com/libraries/foundation - Prashant Ghimire

Answer 1

重要的是拥有一个<span>元素。 在下面的 2 个示例中，第一个示例将不会显示汉堡图标，但第二个和第三个示例将会。

<li class="toggle-topbar menu-icon "><a href="#">Menu</a></li>
<li class="toggle-topbar menu-icon "><a href="#"><span>Menu</span></a></li>
<li class="toggle-topbar menu-icon "><a href="#"><span></span></a></li>

- zhirzh

Answer 2

<li class="toggle-topbar menu-icon">
    <a href="#"><span>MENU</span></a>
</li>

这与最新版本（5.5.3）完美配合。

- Arif Dewi

Answer 3

菜单图标类应该在标签中。

<li class="toggle-topbar"><a class="menu-icon" href="#"><span>Menu</span></a></li>

- Arby

---

不符合Foundation Docs的规定。我遇到了同样的问题。这并没有解决它。 - theherk

Answer 4

这里有一个基础修复方案，对我来说至少能解决顶部菜单图标的问题。

- user1233576