如何在 Foundation 中添加切换导航菜单按钮答案

【问题标题】：How to add a toggle navigation menu button in Foundation如何在 Foundation 中添加切换导航菜单按钮
【发布时间】：2017-06-21 11:36:47
【问题描述】：

我正在使用 Foundation，并且我已经阅读了其网站上的文档，然后我设计了我的网站导航，如下所示：

<div class="top-bar BHoma">
            <div class="top-bar-left title-bar-left">
                <ul class="menu">
                    <li class="menu-text"><img src="img/text-logo.png" width="100"  height="50" title="شرکت طراحی، برنامه نویسی و بازاریابی دانوپ"></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
            <div class="top-bar-right title-bar-right">
                <ul class="menu">
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
        </div>

所以基本上我已经添加了正确的类属性，它也是响应式的，但问题是它没有为小型设备显示任何类型的切换菜单按钮。我的意思是它只显示菜单链接，而不是在 Bootstrap 中以navbar-collapse 选项显示它们！那么有什么办法可以在 Foundation 中添加一个菜单切换按钮，或者它就这样结束了吗？

您也可以点击link，查看我正在开发的整个网站。

【问题讨论】：

您是否查看过data-toggle 属性。 foundation.zurb.com/sites/docs/…

标签： html css responsive-design zurb-foundation zurb-foundation-6

【解决方案1】：

您需要添加在http://foundation.zurb.com/sites/docs/top-bar.html 的“高级布局”部分中找到的数据切换指令

<div class="top-bar">
  <div class="top-bar-title">
    <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
      <button class="menu-icon dark" type="button" data-toggle></button>
    </span>
    <strong>Site Title</strong>
  </div>
  <div id="responsive-menu">
    <div class="top-bar-left">
      <ul class="dropdown menu" data-dropdown-menu>
        <li>
          <a href="#">One</a>
          <ul class="menu vertical">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
          </ul>
        </li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu">
        <li><input type="search" placeholder="Search"></li>
        <li><button type="button" class="button">Search</button></li>
      </ul>
    </div>
  </div>
</div>

【讨论】：