如何基金会

Question

添加切换导航菜单按钮，我使用基金会

，我已阅读在其网站上的文件，然后我设计我的网站是这样的导航：

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