Question

我正在使用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。

查看我正在开发的整个网站

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

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

1 个答案: